Why does ng-click not fire functions when inside ng-repeat, in AngularJS?

Issue

I am working on a small AngularJS application. In one of the views, I have replaced some hard-coded html with data coming from a JSON file that I iterate through:

<class="actions-list">
    <div ng-repeat="item in $ctrl.myCustomService.config.items"
         ng-class="{'disabled': !item.isEanabled}"
         class="actions-item"
         ng-click="$ctrl.selectAction('{{item.action}}')">
      {{item.name | translate }}
    </div>
 </div>

The problem is that, since this replacement, the function fired by ng-click, that used to be (hard-coded) ng-click="$ctrl.selectAction('register'); and so on, does not work anymore.

Why does that happen? How can I fix the problem?

Solution

You don’t need quotes or {{ }} inside ng-click:

<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
     ng-class="{'disabled': !item.isEanabled}"
     class="actions-item"
     ng-click="$ctrl.selectAction(item.action)">
  {{item.name | translate }}
</div>

Answered By – Bill P

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.