我注意到其他人由于范围的原因而使用 $parent 的 react 。我已经尝试过,但由于某种原因,即使如此,它也不总是被解雇。当状态变为事件时,事件可能会被触发,也可能不会。如果我切换列表中的最后一个,它不会触发。
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>
最佳答案
你最好使用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>
关于angularjs - ng-click 在 ng-repeat 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28597113/