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

Question

我无法找到一个解决方案，该解决方案允许我使用 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"];

Answer 1

试试这个方法。

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>

Answer 2

   <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;
    });
   };
   });

与 this.I 联系，认为这会对您有所帮助

Demo Link

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

Uncheck all checkboxes in AngularJS

html

checkbox

angularjs

angular-ngmodel