ng-click在ng-repeat中不工作。

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.

我注意到其他人对使用$parent的响应的范围。我已经试过了，但出于某种原因，即使那样也不一定会被解雇。当状态变为活动状态时，事件可能会被触发或没有。如果我切换列表中的最后一个，它不会启动。

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>

2 个解决方案

#1

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.

您应该更好地使用ng-change而不是ng-click。它的优点是在更改发生之后调用函数，而不是在更改之前调用。

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.

但是，代码并不是错误的，正如您在附件片段中看到的(如果用ng-click替换ng-change)仍然有效。所以你可以更好地描述你的问题。

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)

顺便说一句，你使用标签是错误的，因为它没有连接到输入。相反，将 open标记放在输入之前(或用于="inputId"属性)，这样您就可以单击标签，而不只是单击复选框(这有利于访问)

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>

#2

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)

按照我看到你的代码的方式，我假设你是从db中获得待办事项。即使您不是，您也可以给每个todo一个惟一的id(如果todo是从db开始的，那么这个id已经存在了)。然后，您可以将每个todo的id - (todo.id)传递给click函数。现在可以使用它来标识被单击的特定todo(请记住，id对每个todo都是惟一的)

Hope this solves the problem.

希望这能解决问题。

#1