my ng-if isn't working

Question

I'm having a problem getting an ng-if to work. It works elsewhere within the same file, but not on the disclaimer line

<div id="wallet" class="row">
    <div class="details">
            <div class="row" ng-repeat="account in accounts">
                <h3 ng-if="account.cardName == 'Cash'">Cash</h3>
                <div class="metrics">
                    <div class="balance">
                        <h5>Current Balance</h5>
                        <a ng-if="!isImpersonator()" href="{{account.walletUrl}}" target="_blank">
                            <u ng-if="account.cardName == 'Cash'">
                                <span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
                                <span ng-if="!account.ABS_BALANCE">$0.00</span>
                            </u>
                            <u ng-if="account.cardName == 'Award Points'">
                                <span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | number}}</span>
                                <span ng-if="!account.ABS_BALANCE">0</span>
                            </u>
                        </a>
                        <a ng-if="isImpersonator()">
                            <u ng-if="account.cardName == 'Cash'">
                                <span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
                                <span ng-if="!account.ABS_BALANCE">$0.00</span>
                            </u>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
</div>

I only want the disclaimer line to appear if account.cardName is equal to 'Cash'. Why does the ng-if work above but not on the disclaimer line?

Thanks in advance...

Answer 1

This is because the disclaimer line is out of scope. The account doesn't exist at that point. You will have to move the disclaimer line inside the ng-repeat block, where account exists to make this work.

Answer 2

Your

    <p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>

Is outside the div with the ng-repeat, then it´ll not be accesible. Try this way;

<div id="wallet" class="row">
    <div class="details">
            <div class="row" ng-repeat="account in accounts">
                <h3 ng-if="account.cardName == 'Cash'">Cash</h3>
                <div class="metrics">
                    <div class="balance">
                        <h5>Current Balance</h5>
                        <a ng-if="!isImpersonator()" href="{{account.walletUrl}}" target="_blank">
                            <u ng-if="account.cardName == 'Cash'">
                                <span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
                                <span ng-if="!account.ABS_BALANCE">$0.00</span>
                            </u>
                            <u ng-if="account.cardName == 'Award Points'">
                                <span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | number}}</span>
                                <span ng-if="!account.ABS_BALANCE">0</span>
                            </u>
                        </a>
                        <a ng-if="isImpersonator()">
                            <u ng-if="account.cardName == 'Cash'">
                                <span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
                                <span ng-if="!account.ABS_BALANCE">$0.00</span>
                            </u>
                        </a>
                    </div>
                </div>
            </div>
              <p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
        </div>
    </div>
</div>

Answer 3

The scope issue was the problem, as pointed out above. Here's what we did to fix..

Added a new function:

$scope.accounts = accounts.data;
  $scope.hasCashAccount = () =>
    $scope.accounts.some(a => a.cardName === 'Cash');

Then changed the

to:

[code]
<p class="disclaimer" ng-if="hasCashAccount()">Cash may be deposited to your card up to 48 hours.</p>
[/code]