javascript - 单击后 AngularJS "double checking"中的复选框

Question

我正在尝试使用 Angular 制作一个简单的待办事项列表应用程序。当用户单击该复选框时，列表项应该消失。现在，单击复选框后列表项会消失，但其正下方的列表项的复选框也会被选中(尽管列表项不会消失)。

<ul ng-repeat="item in arr track by $index">
    <li>
        <input type="checkbox" ng-click="check(item)">
        <span>{{ item }}</span>
    </li>
</ul>

$scope.arr = [
    'todo 1',
    'todo 2',
    'todo 3'
];

$scope.check = function(item) {
    var indexOf = $scope.arr.indexOf(item);
    if (indexOf !== -1) {
        $scope.arr.splice(indexOf, 1);
    }
};

有什么办法可以解决这个问题吗？

Answer 1

不确定这是如何按原样工作的，但完成此操作的正常方法是使用 ng-model关于<input> 。将您的项目变成对象，以便它们可以存储更复杂的状态，这也可以让您删除 track by .

<ul ng-repeat="item in arr">
  <li>
    <input type="checkbox" ng-model="item.done">
    <span>{{item.label}}</span>
  </li>
</ul>

$scope.arr = [
  {label: 'todo 1', done: false},
  {label: 'todo 2', done: false},
  {label: 'todo 3', done: false}
];

这应该可以正确设置您的检查和取消检查。要在完成后删除项目，我建议使用 ng-repeat 上的文件管理器。 .

ng-repeat="item in arr | filter: {done: 'false'}"

https://plnkr.co/edit/ybikvwysC6ZEd7CeZnnt?p=preview