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

   <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

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

取消选中AngularJS

2 个答案: