0

I am using the ionic framework to make an app. I want to do an if/else statement like I would in php.

Basically if the user does not select an account from the code below then the label after it must not show. 

 <label class="item item-input item-select"> <div class="input-label"> Choose your account </div> <select ng-model="vm.paymentPlanData.matter" ng-change="vm.newAccount()"> <option ng-repeat="account in vm.accounts" value="{{account.matterno}}">{{account.company}}</option> </select> </label>

But if they then have selected an account then this must show

<label class=" item-input item-stacked-label" ng-if="{{account.company !== null}}"> <div class="row"> <span class="input-label col">Amount</span> <span class="col" style="text-align: right">R{{vm.paymentPlanData.amount}}</span> </div> <div class="range range-energized"> <span>R{{vm.account.minPaymentPlanAmount}}</span> <input type="range" step='5' name="volume" min='{{vm.account.minPaymentPlanAmount}}' max='{{vm.account.maxPaymentPlanAmount}}' ng-model="vm.paymentPlanData.amount"> <span>R{{vm.account.maxPaymentPlanAmount}}</span> </div> </label>

I tried using an ng-if like this 

<label class=" item-input item-stacked-label" ng-if="{{account.company}} !== null">

But this doesnt work. is the ng-if the right way to go about this? and if so is there something more that I am missing?

Improve this question
4
  • !== null part must go in the curly braces ({{account.company !== null}}) Commented Jan 13, 2016 at 12:02
  • Ammended but still no luck, I think the null piece may mean nothing? Commented Jan 13, 2016 at 12:12
  • Can you try: ng-if="account.company". Commented Jan 13, 2016 at 12:16
  • Tried and no luck. Is it possible that I must edit the controller? or can this all be done in the html? Commented Jan 13, 2016 at 12:18

1 Answer 1

Reset to default
1

If you want the label to show only when something is selected from your select element, then use the select element ng-model variable in the ng-if condition of your label. Something like this

<label class=" item-input item-stacked-label" ng-if="vm.paymentPlanData.matter">

Edit: here is a sample plunk for this working in angular js

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

THANK YOU! It seems I need to research ng-model more to understand this logic better so that I can do it first time next time :)
sure, Ionic is basically angularjs with a punch of modules on top of it to support mobile applications. It is imperative to understand angularjs concepts to use ionic comfortably.