0

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

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

普朗克

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>
4

2 回答 2

1

我对你的 plunker 进行了分叉和修改：

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

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

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

我对这种方法的推理一般来说，我喜欢让ng-model管理我需要的任何信息（在这种情况下选择或不选择什么）以及 2 路数据绑定的所有工作。我觉得这通常会产生更少的代码和更简洁的代码。

于 2013-07-26T17:19:06.610 回答
0

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

$scope.$watch('selected.length', function () {
   $scope.s = $scope.selected.some(function (i){
     return i === $scope.item;
   });
});
于 2013-07-26T14:21:37.667 回答