取消选中AngularJS中的所有复选框答案

【问题标题】：Uncheck all checkboxes in AngularJS取消选中AngularJS中的所有复选框
【发布时间】：2016-07-30 21:10:05
【问题描述】：

我很难找到一个解决方案，让我可以使用 AngularJS 简单地取消选中所有复选框。我使用一个简单的 ng-repeat 来制作复选框，并想要一个按钮来清除它们。

        <div class="form-group">  <!-- Checkbox Group !-->
                    <label class="control-label">What are your requirements</label>
                    <div class="checkbox" ng-repeat="block in blocks">
                      <label>
                        <input type="checkbox" ng-model='myModel' name="block" value="block" ng-change="filter(block)">
                        {{block}}
                      </label>
                    </div>
                </div>  

                <div> 
                    <input type="button" class="btn btn-primary " name="Clear" ng-click="reset()" value="Reset"> </input>
                </div>

我曾尝试更改 ng-model 几次，但由于我使用了 ng-change 功能，所以一直出错。有什么方法可以在控制器中创建一个名为 reset() 的函数来清除所有复选框（即使它在按名称遍历每个复选框的 for 循环中）？

供参考

$scope.blocks = ["Lambda","Tokenization","Hadoop"];

【问题讨论】：

jsfiddle.net/VSph2/283

标签： angularjs html checkbox angular-ngmodel

【解决方案1】：

   <div ng-controller="checkboxController">
 <ul>
  <li ng-repeat="item in Items">
  <label>{{item.Name}}
    <input type="checkbox" ng-model="item.Selected" />
  </label>
  </li>
 </ul>
<input type="button" value="UnCheck All" ng-click="checkAll(Items.length)" />
</div>

var app=angular.module("CheckAllModule", []);
app.controller("checkboxController", functioncheckboxController($scope) {
$scope.Items = [{
    Name: "Item one"
}, {
    Name: "Item two"
}, {
    Name: "Item three"
}];
$scope.checkAll = function (Count) {
  angular.forEach($scope.Items, function (item) {
     item.Selected = false;
    });
   };
   });

检查一下。我认为这会对您有所帮助

Demo Link

【讨论】：

【解决方案2】：

试试这个方法。

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

app.controller('mainCtrl', function($scope) {
$scope.blocks = ["Lambda","Tokenization","Hadoop"];
   $scope.checkBlocks = [];
  $scope.filter = function(b){
  
  }
  $scope.reset= function(){
    $scope.checkBlocks = [];
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="mainCtrl">
   <div class="form-group">  <!-- Checkbox Group !-->
                    <label class="control-label">What are your requirements</label>
                    <div class="checkbox" ng-repeat="block in blocks">
                      <label>
                        <input type="checkbox" ng-checked="checkBlocks[block]" ng-model='checkBlocks[block]' name="block" value="block" ng-change="filter(block)">
                        {{block}}
                      </label>
                    </div>
                </div>  

                <div> 
                    <input type="button" class="btn btn-primary " name="Clear" ng-click="reset()" value="Reset"> </input>
                </div>
  
</body>

【讨论】：