my ng-if isn't working

530 views Asked by At

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...

3

There are 3 answers

0
Steve On

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]
0
Abhishek Jain On

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.

0
Alejandro Teixeira Muñoz On

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>