ng-repeat + ng-click not working as expected

Question

Seems that this is a very common issue with angular. The substitutions happen, but the ng-click fails to click (or so it seems to not be called). Can someone tell me why this fails?

<ul>
     <li ng-repeat="color in colors"> 
         <a ng-click="chooseColor({{$index}})">{{color.name}}</a>
     </li>
</ul>

here is the fiddle.

It seems to be the {{$index}}. If i replace that with a static number, it works.

Note: found this question - but it was not helpful.

Quick note in using $index for changing a value in the scope. If you filter the original array using | filter: sth method (basically if you filter on the view), then the index on the view could be different than the actual, nonfiltered array. It is better to accept the value itself rather than the index. — Umur Kontacı
– Umur Kontacı, Commented Apr 3, 2013 at 21:05

Langdon · Accepted Answer · 2013-04-04 12:27:49Z

14

The {{}} bits are used templating (interpolation). This should work for you:

ng-click="chooseColor($index)"

The ng-click directive is looking for ~~real JavaScript code~~ an Angular Expression, not text that it needs to interpolate.

edited Apr 4, 2013 at 12:27

answered Apr 3, 2013 at 20:05

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Rajcok Over a year ago

Note, ng-click requires an Angular expression (not JavaScript code).

Collectives™ on Stack Overflow

ng-repeat + ng-click not working as expected

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related