Using ng-if to show certain things if condition is met

Question

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> &nbsp;
    <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&nbsp;<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?

lealceldeiro · Accepted Answer · 2018-07-27T18:09:28.930

7

The problem is life.beneficiary.length = 0 is NOT a comparison, 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&nbsp;
</a>

Also, it is recommended 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&nbsp;</a>

  </span>

</p>

edited Jul 27 '18 at 18:09

answered Apr 04 '17 at 20:05

lealceldeiro

14,342
6
49
80

This doesn't fix the problem of having his `ng-repeat` on the first `` instead having an `ng-repeat` on both`` tags or on a container element. – kennypowers Apr 04 '17 at 20:32
@kennypowers, I'm sorry, I don't understand clearly what you're trying to say :( The OP put in his question only one `ng-repeat`. I saw your answer as well, but I don't get it yet. What do you need the second `ng-repeat` for? I think you might assumed that part. That code will generate a completely different html from the one that would be generated from the one posted in the question. – lealceldeiro Apr 04 '17 at 20:39
The first `` tag is the element that is repeating. He kind of has all his html on a single line so it's hard to tell...Since that is the case, the second `` tag and `ng-if` are not doing anything. Unless I'm going blind... – kennypowers Apr 04 '17 at 20:46
Oh, I understand the confusion now (yours or mine, only the OP can tell). I assumed that all the tag which call the `editBeneficiary` function were necessary inside the `ng-repeat` (because they are there for editing the element) and a last one for adding a new beneficiary (but just once at the end). You thought in a different behavior obviously (I'm not saying at all it's wrong. Maybe asking to the OP is a good idea :) ). – lealceldeiro Apr 04 '17 at 20:55
hey sorry for the confusion, I want the ng-repeat to dynamically create rows if beneficiaries exist. If beneficiaries do NOT exist, I just want to display a link that says "Add Beneficiary" which opens up a modal window for them to do so. Would I still need ng-repeat on the second tag if this is the case? – Dave Apr 04 '17 at 21:16
No, I think you don't, Dave. With the answer provided above I think you can solve your problem. – lealceldeiro Apr 04 '17 at 21:21
@Dave you are using `life` in the `ng-if` in your second `` tag. But `life` doesn't exist there. The second `` tag is outside of the `ng-repeat` where `life` is created. Thus you need to create a container element, like a `
`, and add the `ng-repeat` to that. Inside of that `
`, you can put both `` tags with separate `ng-if` statements. This will get you what you want. OR you can add the same `ng-repeat` to both `` tags.
– kennypowers Apr 04 '17 at 21:50
@Dave, @kennypowers, I agree, I didn't realize life was being gotten from the `data.list2`. I updated the answer. Please, see the section **EDITED** – lealceldeiro Apr 05 '17 at 13:51

score 1 · Answer 2 · answered Apr 04 '17 at 19:59

1

Try to change this

ng-if="life.beneficiary.length = 0"

In

ng-if="life.beneficiary.length == 0"

answered Apr 04 '17 at 19:59

valbrux

320
1
12

kennypowers · Answer 3 · 2017-04-04T20:23:07.057

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"> &nbsp;<strong>Insured?</strong> &nbsp;&nbsp;<font size=2>
        <i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
    </font>&nbsp;&nbsp;
</h4>
<p>
    <strong>Covered:</strong> &nbsp;
    <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">&nbsp;and&nbsp;</font>{{life.beneficiary}}&nbsp;&nbsp;
        <i class="fa fa-edit" /><font ng-show="!$last">,&nbsp;</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&nbsp;
        <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"> &nbsp;<strong>Insured?</strong> &nbsp;&nbsp;<font size=2>
        <i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
    </font>&nbsp;&nbsp;
</h4>
<p>
    <strong>Covered:</strong> &nbsp;
    <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">&nbsp;and&nbsp;</font>{{life.beneficiary}}&nbsp;&nbsp;
            <i class="fa fa-edit" /><font ng-show="!$last">,&nbsp;</font>
        </a>
        <a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">
            Add Beneficiary&nbsp;
            <i class="fa fa-plus-circle" style="color: green;" />
        </a>
    </div>
</p>

Pushp Singh · Answer 4 · 2020-08-11T08:20:18.220

**

Use life.beneficiary.length === 0 instead life.beneficiary.length = 0
= is used for assignment and == or === is used for comparison.

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&nbsp;<i class="fa fa-plus-circle" style="color: green;"/></a></p>

Using ng-if to show certain things if condition is met

4 Answers4