Question

我有一个选定的数组，它将包含所有选中的项目。因此，当您更改复选框时，该项目将从该数组中添加或删除。问题是，如果其他内容更改了所选数组，则复选框不会更新。

在项目中存储所选状态不是一个选项，因为在我的应用中，items数组会根据网址重新填充。因此，所选数组是一个全局数组，包含您选择的所有项目。为了给它一些上下文我的应用程序是一个文件浏览器，你可以选择不同目录中的文件。

Plunker

http://plnkr.co/edit/h9t3caBzk7hyTYJysCay?p=preview

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.selected = ['one'];
  $scope.items = ['one', 'two', 'three'];

  $scope.select = function (item, s) {

    if (s) {
      return $scope.selected.push(item);  
    }

    $scope.selected.splice($scope.selected.indexOf(item.path), 1); 

  }

});

app.controller('ItemCtrl', function ($scope) {

  $scope.s = $scope.selected.some(function (i){
    return i === $scope.item;
  })

})

HTML

<body ng-controller="MainCtrl">

  <button ng-click='selected.length = 0'>Clear selected</button>

  <p ng-repeat='item in items' ng-controller='ItemCtrl'>
   <input type='checkbox' ng-change='select(item, s)' ng-model='s' /> {{item}}
  </p>

  {{selected}}

</body>

Answer 1

我分叉并修改了你的plunker：

http://plnkr.co/edit/usoaJN8O0BE0J1vIdSwB?p=preview

所以我所做的就是将$scope.selected更改为一个对象，并将每个复选框的ng-model绑定到该对象，每个项的值都作为键（ng-model=selected[item]）。

我还添加了一个函数，它将遍历$scope.selected并以数组格式返回所有选定的项目，以匹配我所假设的最终输出。

我采用这种方法的原因一般来说，我喜欢让ng-model完成管理我需要的任何信息的所有工作（在这种情况下选择与否）以及双向数据绑定。我觉得这通常会产生更少的代码以及更清晰的代码。

Answer 2

一种选择是在'$ scope。$ watch'中包含'$ scope.s'赋值。它有效，但我想知道是否有更好的解决方案。

$scope.$watch('selected.length', function () {
   $scope.s = $scope.selected.some(function (i){
     return i === $scope.item;
   });
});

根据阵列选中/取消选中复选框

2 个答案: