I'm trying to use ng-if to show certain rows if the condition is met, but can't quite seem to get it to work 100% correctly.
<div style="margin-bottom: 1em;">
<h4><!-- content omitted for brevity--></h4>
<p>
<strong>Covered:</strong>
<a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="life.beneficiary.length > 0" ng-click="c.editBeneficiary(life)">
<!-- content omitted for brevity-->
</a>
<a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">Add Beneficiary <i class="fa fa-plus-circle" style="color: green;"/></a></p>
</div>
In the above code, if the number of beneficiaries is greater than 0 (ng-if="life.beneficiary.length > 0"), I want to list out the names and allow the user to edit them if necessary. This part is working fine. However, if the number of beneficiaries equals 0, then I want to have a link that says "Add Beneficiary", and allow the user to do so.
I put the ng-if statements in the <a> tag, which I'm not sure is right. When I log in with a user who does NOT have a beneficiary, the "Add Beneficiary" link doesn't show up.
- What am I doing wrong here?
I'm trying to use ng-if to show certain rows if the condition is met, but can't quite seem to get it to work 100% correctly.
<div style="margin-bottom: 1em;">
<h4><!-- content omitted for brevity--></h4>
<p>
<strong>Covered:</strong>
<a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="life.beneficiary.length > 0" ng-click="c.editBeneficiary(life)">
<!-- content omitted for brevity-->
</a>
<a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">Add Beneficiary <i class="fa fa-plus-circle" style="color: green;"/></a></p>
</div>
In the above code, if the number of beneficiaries is greater than 0 (ng-if="life.beneficiary.length > 0"), I want to list out the names and allow the user to edit them if necessary. This part is working fine. However, if the number of beneficiaries equals 0, then I want to have a link that says "Add Beneficiary", and allow the user to do so.
I put the ng-if statements in the <a> tag, which I'm not sure is right. When I log in with a user who does NOT have a beneficiary, the "Add Beneficiary" link doesn't show up.
- What am I doing wrong here?
4 Answers
Reset to default 7The problem is life.beneficiary.length = 0 is NOT a parison, it's trying to assign 0 (zero) value to life.beneficiary.length(which is wrong).
Besides, when there is not beneficiaries life.beneficiary.length == 0 (which is correct) might be falsy because life.beneficiary could be null or undefined (it depends on your controller logic)... but, in order to solve this try:
Change ng-if="life.beneficiary.length = 0" to ng-if="!life.beneficiary.length" (this is equivalent to ng-if="life.beneficiary.length == 0", but it won't fail in your logic if life.beneficiary is null or undefined)
<a ng-href class="pointer" ng-if="!life.beneficiary.length" ng-click="c.addBeneficiary()">Add Beneficiary
</a>
Also, it is remended to wrap both links (<a>) inside an element (span, div, ... as you wish) which will contain the ng-repeat, something like this:
<p>
<!-- there is content omitted for brevity -->
<span data-ng-repeat="life in data.list2 track by $index">
<a class="pointer" ng-if="life.beneficiary.length > 0" ng-click="c.editBeneficiary(life)">
<!-- content omitted for brevity-->
</a>
<a class="pointer" ng-if="!life.beneficiary.length" ng-click="c.addBeneficiary()">Add Beneficiary </a>
</span>
</p>
Try to change this
ng-if="life.beneficiary.length = 0"
In
ng-if="life.beneficiary.length == 0"
The way you have it set up currently, it is only going to show the <a> tags that meet the first ng-if requirement. Both of your <a> tags need an ng-repeat statement along with the proper ng-if statement:
<div style="margin-bottom: 1em;">
<h4>
<img class="icon" src="basic_life.png" height="30" width="30"> <strong>Insured?</strong> <font size=2>
<i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
</font>
</h4>
<p>
<strong>Covered:</strong>
<a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="life.beneficiary.length > 0"
ng-click="c.editBeneficiary(life)">
<font ng-show="$last && !$first"> and </font>{{life.beneficiary}}
<i class="fa fa-edit" /><font ng-show="!$last">, </font>
</a>
<a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="!life.beneficiary.length" ng-click="c.addBeneficiary()">
Add Beneficiary
<i class="fa fa-plus-circle" style="color: green;" />
</a>
</p>
If you want it under a single ng-repeat you would need to do something like this:
<div style="margin-bottom: 1em;">
<h4>
<img class="icon" src="basic_life.png" height="30" width="30"> <strong>Insured?</strong> <font size=2>
<i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
</font>
</h4>
<p>
<strong>Covered:</strong>
<div data-ng-repeat="life in data.list2 track by $index">
<a ng-href class="pointer" ng-if="life.beneficiary.length > 0"
ng-click="c.editBeneficiary(life)">
<font ng-show="$last && !$first"> and </font>{{life.beneficiary}}
<i class="fa fa-edit" /><font ng-show="!$last">, </font>
</a>
<a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">
Add Beneficiary
<i class="fa fa-plus-circle" style="color: green;" />
</a>
</div>
</p>
**
- Use life.beneficiary.length === 0 instead life.beneficiary.length = 0
- = is used for assignment and == or === is used for parison.
or, you can also use this optimized logic.
- ng-if="life.beneficiary.length"
if beneficiary length is 0 then link will be hidden else it will show up.
**
<a ng-href class="pointer" ng-if="life.beneficiary.length === 0" ng-click="c.addBeneficiary()">Add Beneficiary <i class="fa fa-plus-circle" style="color: green;"/></a></p>