Ionic if else statement to display and show data

2019-09-08 03:22发布

问题:

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?

回答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