Angular：如何取消选中带有链接的所有复选框？

Question

这是我的小提琴：http://jsfiddle.net/VSph2/280/

我正在尝试取消选中 checkbox 并使用链接重置范围变量的值，但是它似乎不起作用。有人可以帮忙吗？

Javascript：

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

app.controller('IndexCtrl', ['$scope', function($scope) {

  $scope.colors = [
    {id: 1, name: "Blue"},
    {id: 2, name: "Green"},
    {id: 3, name: "Red"}
  ];
  $scope.color_ids = [];

  $scope.clearAll = function() {
    angular.forEach($scope.color_ids, function(color_id) {
      color_id.checked = false; //nothing works!!
      color_id.selected = false; //
    });
    $scope.color_ids = [];
    $scope.color_ids.selected = false; //doesn't work either
  };

}]);

HTML：

<div ng-controller="IndexCtrl">{{1+1}}
<h2>Products</h2>
  <div class="filters col-two">
    <a ng-click="clearAll()">Clear all filters</a>
    <h3>Color</h3>
    <div ng-repeat="color in colors">
      {{ color.name }} <input type="checkbox" ng-model="color_ids">
    </div>
  </div>
</div>

Answer 1

您永远不会向 color_id 数组添加任何内容，因此 foreach 不会迭代任何内容。

我将您的代码更新为仅使用主颜色数组并在其上添加 selected 属性：

http://jsfiddle.net/VSph2/283/

html:

{{ color.name }} <input type="checkbox" ng-model="color.selected">

javascript：

angular.forEach($scope.colors, function(color_id) {        
    color_id.selected = false;
});

Answer 2

我在寻找类似的东西时遇到了这个问题，我的解决方案是重置 color_ids 对象

$scope.clearAll = function() {    
    $scope.color_ids = [];
};

您还需要对输入进行以下更改

<input type="checkbox" ng-model="color_ids[color.id]" ng-checked="color_ids[color.id]">

jsfiddle 在 https://jsfiddle.net/novelnova/VSph2/756/

Answer 3

您误解了 checkbox 上的 ng-model 的作用。它只会切换特定的值集。因此，在您的示例中，您可能希望将其更改为：

{{ color.name }} <input type="checkbox" ng-model="color.selected">

然后您的颜色将有一个名为selected 的附加属性，该属性为真或假，具体取决于该框是否被选中。

要清除，然后您将遍历所有颜色并将其选定状态设置为 false。

$scope.clearAll = function() {
    angular.forEach($scope.colors, function(color) {
        color.selected = false;
    });

更新小提琴：http://jsfiddle.net/VSph2/285/