angularjs - Angular Checkbox Filters uncheckedAll

Question

如何创建一个取消选中此过滤器中所有复选框的按钮？

请检查这个[fiddle](http://jsfiddle.net/65Pyj/)

Answer 1

在控制器中的代码中添加了几行：

   $scope.ckB = function(){
        $scope.first= false;
        $scope.second=false;
        $scope.third=false;
        $scope.colourIncludes = [];
    }

html中的变化：

<input type="checkbox" ng-model="first" ng-click="includeColour('Red')"/> Red</br>
    <input type="checkbox" ng-model="second" ng-click="includeColour('Orange')"/> Orange</br>
    <input type="checkbox"  ng-model="third" ng-click="includeColour('Yellow')"/> Yellow</br>
    <button ng-click="ckB()">Click</button>

这是 我希望这有帮助的小提琴。

Answer 2

我已经修改了 html 代码以包含一个 ng-repeat 循环。这将确保checkAll()您不必按名称引用每个复选框，这与Deep之前的答案不同。每个元素都有一个嵌入的 ng-click 属性。

<!-- Start : Changed ng-repeat loop -->
<div ng-repeat="f in fruits">
    <input type="checkbox" 
            ng-click="includeColour(f.colour);"
            ng-model="f.selected">{{f.colour}}</input>
</div>
<!-- End : Changed ng-repeat loop -->

修改了控制器中的 checkAll 函数。

 $scope.checkAll = function () {
                               $scope.colourIncludes = [];
                               angular.forEach($scope.fruits, function (f) {
                                    f.selected = true;
                                    //to set filter dump
                                    $scope.colourIncludes.push(f.colour);
                                    });

                               };

这是 JSFiddle 演示：在此处输入链接描述