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

自动检查已删除项目下面的复选框，因为首先检查数组中元素的信息仍然有效，但是每执行splice个方法，数组的长度都会减少。这就是为什么你必须实际告诉角度检查另一个元素，在前一个元素被拼接后在数组中取index: 0是不必要的。

以下是解决方案： Plunker link

原始代码：

<ul ng-repeat="item in arr track by $index">
  <li>
    <input type="checkbox" ng-click="check(item)" ng-model="item.selected">
    <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);
    $scope.item.selected = false;
}

Answer 2

不确定这是如何工作的，但正常的方法是使用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

Answer 3

之所以发生这种情况，是因为您使用＆＃34;跟踪$ index＆＃34;。尝试没有跟踪，或使用跟踪一些唯一字段（id），在这种情况下，您的列表应包含对象，而不是基元。例如：

$scope.arr = [
  {id: 1, name: 'todo 1'},
  {id: 2, name: 'todo 2'},
  {id: 3, name: 'todo 3'} //...
];

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

$scope.check = function(index) {
    $scope.arr.splice(index, 1);
}

Answer 4

您需要阻止点击事件执行默认操作

 <input type="checkbox" ng-click="check(item);$event.preventDefault();" />

Angular在点击时移除了元素，但是（移动的）元素也获得了click事件，并对其进行了检查。 $ event.preventDefault（）将阻止这种情况。

这是一个有效的plunk

点击后AngularJS中的复选框“双重检查”

4 个答案: