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

时间:2015-02-19 01:17:39

标签: angularjs angularjs-ng-repeat angularjs-ng-click

我注意到其他人因为范围而使用$ 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>

2 个答案:

答案 0 :(得分:2)

您最好使用ng-change代替ng-click。它的优点是在发生变化之后调用函数,而不是之前可能调用函数。

然而,代码没有错并且确实有效,正如您在附加代码段中看到的那样(如果您将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>

答案 1 :(得分:0)

我看到你的代码的方式,我假设你从db中得到了todos。即使你不是,你也可以给每个todo一个唯一的id(如果todos来自db,它就已存在)。然后你可以将每个待办事项的id - (todo.id)传递给click功能。现在可以用它来识别被点击的特定待办事项(记住每个待办事项的id都是唯一的)

希望这能解决问题。