Ng-click doesn’t work inside ng-repeat

by

As Ven mentioned, ng-repeat does create a child scope for each item in the loop. The child scopes do have access to the parent scope’s variables and methods through prototypal inheritance. The confusing part is when you make an assignment, it adds a new variable to the child scope rather than updating the property on the parent scope. In ng-click, when you make an assignment call tiggerTitle =e.name, it actually adds a new variable called triggerTitle to the child scope. The AngularJS docs explains this well in the section here called JavaScript Prototypal Inheritance.

So how do you get around this and set the model variable properly?

A quick and dirty solution is to access the parent scope using $parent like so.

<a ng:click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">...

Click to see a working version of your Fiddle using the $parent solution.

The use of $parent can cause issues if you are dealing with nested templates or nested ng-repeats. A better solution may be to add a function to the controller’s scope which returns a reference to the controller’s scope. As already mentioned, the child scopes have access to call the parent functions, and thus can reference the controller’s scope. 

function MyCtrl($scope) {
    $scope.getMyCtrlScope = function() {
         return $scope;   
    }
 ...

<a ng-click="getMyCtrlScope().triggerTitle=e.name;getMyCtrlScope().triggerEvent = ...

Click to see a working version of your Fiddle using the better method

More Related Contents:

  1. Angular ng-click event delegation
  2. How to iterate over the keys and values with ng-repeat in AngularJS?
  3. How to make ng-repeat filter out duplicate results
  4. AngularJS For Loop with Numbers & Ranges
  5. Calculating sum of repeated elements in AngularJS ng-repeat
  6. Angular ng-repeat add bootstrap row every 3 or 4 cols
  7. Adding parameter to ng-click function inside ng-repeat doesn’t seem to work
  8. passing 2 $index values within nested ng-repeat
  9. ng-repeat filtering data by date range
  10. Preserve line breaks in angularjs
  11. Directive isolate scope with ng-repeat scope in AngularJS
  12. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  13. AngularJS – How can I reference the property name within an ng-Repeat
  14. When not to use ‘track by $index’ in an AngularJS ng-repeat?
  15. Using comma as list separator with AngularJS
  16. AngularJs Remove duplicate elements in ng-repeat
  17. Using ng-repeat to generate select options (with Demo)
  18. AngularJS – how to override directive ngClick
  19. How/when to use ng-click to call a route?
  20. Using ng-if as a switch inside ng-repeat?
  21. What is `priority` of ng-repeat directive can you change it?
  22. AngularJS – Filter empty objects
  23. shuffle array in ng-repeat angular
  24. Filtering an Angular 1.2 ng-repeat with “track by” by a boolean property
  25. How to highlight a selected row in ngRepeat?
  26. ng-repeat specify a starting index
  27. angularjs text area character counter
  28. How to obtain previous item in ng-repeat?
  29. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  30. Highlighting a filtered result in AngularJS

Leave a Comment