ng-click 在 ng-repeat 中不起作用答案

【问题标题】：ng-click is not working inside ng-repeatng-click 在 ng-repeat 中不起作用
【发布时间】：2015-02-19 10:02:48
【问题描述】：

我注意到其他人因范围而使用 $parent 的反应。我已经尝试过了，但由于某种原因，即使这样做也并不总是被解雇。当状态变为活动状态时，事件可能会被触发或不被触发。如果我切换列表中的最后一个，它不会触发。

控制器：

$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>

【问题讨论】：

尝试使用ng-change 而不是ng-click
控制台有错误吗？
@squiroid 控制台没有错误。我放了一个断点，这个函数没有被命中。它总是在全部或完成状态下工作，但在活动状态下，有时单击复选框该功能不会被击中。我有点想知道是不是因为 $index 的跟踪。

标签： angularjs angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

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

但是代码没有错并且确实有效，正如您在附加的 sn-p 中看到的（如果您将 ng-change 替换为 ng-click）仍然有效。所以你可能想更好地描述你的问题。

PS：附带说明一下，您对label 的使用是错误的，因为它没有连接到输入。相反，将<label> 打开标签放在输入之前（或使用for="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>

【讨论】：

使用 ng-change 对我有用，但使用 ng-click 仍然无法正常工作。

【解决方案2】：

按照我查看您的代码的方式，我假设您正在从数据库中获取待办事项。即使你不是，你也可以给每个 todo 一个唯一的 id（如果 todos 来自一个 db，那么它已经存在）。然后，您可以将每个 todo 的 id - (todo.id) 传递给 click 函数。这现在可用于识别被点击的特定 todo（请记住，每个 todo 的 id 都是唯一的）

希望这能解决问题。

【讨论】：