Clever Geek Handbook

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

I am trying to use ng-if

to show certain lines if a condition is met but cannot 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 the names and allow the user to edit them as needed. This part works fine. However, if the number of beneficiaries is 0, I want to have a link that says "Add Beneficiary" and allow the user to do so.

I have put statements ng-if

in the tag <a>

, but I'm not sure if this is correct. When I log in with a user that does NOT have a beneficiary, the Add Beneficiary link is not displayed.

  • What am I doing wrong here?
+3


source to share


3 answers


The problem is that it is life.beneficiary.length = 0

NOT a comparison, it tries to assign a 0

(null) value to life.beneficiary.length

(which is not correct).

Also, when there are no beneficiaries, life.beneficiary.length == 0

(which is correct) may be false, because it life.beneficiary

may be null

or undefined

(it depends on the logic of your controller) ... but to solve this problem try:

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

to ng-if="!life.beneficiary.length"

(this is equivalent ng-if="life.beneficiary.length == 0"

, but it won a glitch in your logic if life.beneficiary

it matters null

or undefined

)



<a ng-href class="pointer" ng-if="!life.beneficiary.length" ng-click="c.addBeneficiary()">Add Beneficiary&nbsp;
</a>

In addition, it is recommended to wrap the two links ( <a>

) within the cell ( span

, div

, ... if you wish), which will contain 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>
+7


source


Try to change this

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


IN

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


source


Now you can customize the tags <a>

that meet the first requirement ng-if

. Both tags <a>

need an expression ng-repeat

along with the correct statement ng-if

:

<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 one ng-repeat you will 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>

0


source






More articles:


All Articles