在Angular Js中创建一个检查并取消选中所有功能

Question

我已经使用 ng-init 检查了几个复选框

<div class="checkbox">
     <label>
      <input type="checkbox" ng-init="model.A='A'" ng-model="model.A" ng-true-value="'A'" ng-false-value="'nope'"/>A
     </label>
</div>
<div class="checkbox">
     <label>
      <input type="checkbox" ng-init="model.A='B'" ng-model="model.B" ng-true-value="'B'" ng-false-value="'nope'"/>B
     </label>
</div>
<div class="checkbox">
     <label>
      <input type="checkbox" ng-init="model.C='C'" ng-model="model.C" ng-true-value="'C'" ng-false-value="'nope'"/>C
     </label>
</div>

我想要的是创建一个函数，使这些复选框在我选中单独的复选框、链接或按钮时选中和取消选中。有人可以帮我吗？

Answer 1

简单如下，

创建一个链接来切换复选框检查状态，这里我创建了三个链接

第一个用于切换复选框状态，第二个用于取消选中所有复选框，最后一个用于选中所有复选框。

<a href="#" ng-click="toggleCheck()">toggle check</a> | <a href="#" ng-click="uncheckAll()">uncheck all</a> | <a href="#" ng-click="checkAll()">check all</a>

点击取消勾选会像下面这样处理，

$scope.uncheckAll = function() {
    $scope.model.A = false;
    $scope.model.B = false;
    $scope.model.C = false;
};

分配一个值，导致取消选中复选框。

点击check all会像下面这样处理，

 $scope.checkAll = function() {
     $scope.model.A = 'A';
     $scope.model.B = 'B';
     $scope.model.C = 'C';
};

分配导致复选框检查状态的初始值。

像下面一样切换检查，如果A未选中，那么所有将取消选中其他副都将检查。

$scope.toggleCheck = function() {
    if ($scope.model.A == false) {
        $scope.checkAll();
    } else {
        $scope.uncheckAll();
    }
};

这是DEMO

Answer 2

    //on button click
    var key;

   for(key in $scope.model){
      if(//checked condition){
       $scope.model[key] = key;
      }else{
        $scope.model[key] = 'nope';
      }
    }