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

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

Answer 1

    //on button click
    var key;

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

Answer 2

简单如下，

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

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

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

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

点击检查全部将像下面这样处理，

 $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

在 Angular Js 中创建检查和取消检查所有功能

Creating a check and uncheck all function in Angular Js

javascript

angularjs

ng-init