CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ng-if
spersson
spersson

Reputation: 550

ng-if inside ng-repeat not working when using controller function

I have a user object which contains a function that returns true or false, that I would like to use in a ng-if to show/not show some elements in my template. It works perfectly, except when I place the ng-if in a ng-repeat. Then it stops working, and I have no idea why. The function returns the correct values when I log them, so it shouldn't be an issue with the function. I have even tried switching it with a test function that always returns true, but even this doesn't work.

This is the test function that should work:

vm.test = function() {
               return true;
          }

This is the template:

<div class="row" ng-controller="techniquesController as techniques">
    <div class="col-sm-10">
        <div class="card">
            <div class="card__header text-centered" style="overflow: hidden;">
                Tekniker
            </div>

            <div ng-if="!techniques.techniques.$resolved" class="center-align padding-xlarge">
                <i class="fa fa-spin fa-spinner text-large"></i>
            </div>

            <div class="padding-xlarge">
                <div ng-repeat="(category, techniques)  in techniques.techniquesGrouped">
                    <h2 class="h3 margin-top-large">{{category}}</h2>
                    <ul class="list list--striped list--hoverable list--compact">
                        <li class="show-at-hover__target" ng-class="{'list__item': true, 'divider-bottom': !$last}" ng-repeat="technique in techniques | orderBy:['Name']" tabindex="-1">

                            <div class="list__item__primary-content">
                                <div class="list__item__headline">{{technique.Name}}</div>
                            </div>

                            <div class="list__item__secondary-content">
                                <div class="button-group show-at-hover__element" ng-if="techniques.test() === true">
                                    <button ui-sref="technique({techniqueId:technique.Id})" class="button button--compact button--raised-third text-small" ripple><i class="fa fa-pencil fade-75"></i></button>
                                    <button ui-sref="techniqueDelete({techniqueId:technique.Id})" class="button button--compact button--raised-secondary text-small" ripple><i class="fa fa-trash fade-75"></i></button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- works fine below -->
    <div class="col-sm-2 center-align" ng-if="techniques.currentUser.IsAdmin()">
        <a ui-sref="techniqueNew" class="FAB application-main__fab">
            <i class="fa fa-plus"></i>
        </a>
    </div>
</div>

If I replace this row:

<div class="button-group show-at-hover__element" ng-if="techniques.test() === true">

with

<div class="button-group show-at-hover__element" ng-if="'true' === 'true'">

it works, as it obviously should. But, why am I having problems using a ng-if that works with the controller, but only when I put it inside an ng-repeat? I do not understand why the IsAdmin() or test() functions would work outside the ng-repeat but not inside it?

Upvotes: 0

Views: 461

Answers (1)

tymeJV
tymeJV

Reputation: 104775

Because you're re-assigning the techniques variable inside your ngRepeat - your controller alias is being overwritten:

<div ng-repeat="(category, techniques)  in techniques.techniquesGrouped">

Change the value property to something else:

<div ng-repeat="(category, tech)  in techniques.techniquesGrouped">

Upvotes: 1

Related Questions