ng-click is not working inside ng-repeat

Question

I've noticed other peoples' responses to use $parent due to scope. I've tried that but for some reason it doesn't always get fired even with that. When the status becomes active, the event might get fired or doesn't. If I toggle the last one in the list, it does not fire.

controller:

$scope.checkAndSave = function(todo, checked) { $scope.save(todo); };

html:

<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}"> <div class="view"> <input class="toggle" type="checkbox" ng-model="todo.completed" ng-click="checkAndSave(todo)"> <label ng-dblclick="edit(todo)">{{todo.title}}</label> <button class="destroy" ng-click="remove(todo)"></button> </div> </li>

@squiroid There was no errors in the console. I put a breakpoint and the function just wasn't getting hit. It always worked on all or completed state, but in the active state there would be times clicking the checkbox the function wouldn't get hit. I am kinda wondering if its due to the track by $index. — Tyler Pflueger
– Tyler Pflueger, Commented Feb 19, 2015 at 2:15

floribon · Accepted Answer · 2015-02-19 02:02:48Z

You should better use ng-change instead of ng-click. The advantage of it is the function will be called after the change have occured, rather than potentially before.

However the code is not wrong and does work, as you can see in attached snippet (if you replace ng-change by ng-click) is still works. So you may want to better describe your problem.

PS: As a side note, your usage of label is wrong as it is not connected to the input. Instead, put the <label> open tag before the input (or use for="inputId" attribute), which makes you able to click on the label instead of just the checkbox (and is good for accessibility)

angular.module("test", []).controller("test", function($scope) { $scope.todos = [ {title: 'todo #1', completed: false}, {title: 'todo #2', completed: false}, {title: 'todo #3', completed: false} ]; $scope.checkAndSave = function(todo) { status = todo.completed ? 'checked' : 'unchecked'; alert(todo.title + ' has been ' + status); } });

li { list-style-type: none; margin: 5px; padding: 5px; background: #eee; font-family: monospace; width: 8em; border-radius: 6px; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="test"> <li ng-repeat="todo in todos track by $index"> <div class="view"> <label> <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="checkAndSave(todo)"> {{todo.title}}</label> </div> </li> </div>

Using ng-change worked for me, but with ng-click it still wasn't working.

x6iae · Accepted Answer · 2015-02-19 01:26:37Z

The way I see your code, I assume you are getting the todos from a db. even if you are not, you can give each todo a unique id (which will already be present if the todos are comming from a db). you can then pass each todo's id - (todo.id) to the click function. this can now be used to identify the particular todo that is clicked(remember that the id is unique to each todo)

Hope this solves the problem.

Collectives™ on Stack Overflow

ng-click is not working inside ng-repeat

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related