创建一个检查并取消选中Angular Js

时间:2016-07-16 06:40:35

标签: javascript angularjs ng-init

我几乎没有使用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>

我想要的是创建一个函数来检查和取消选中单独的复选框,链接或按钮时复选框。有人可以帮助我吗?

2 个答案:

答案 0 :(得分:1)

    //on button click
    var key;

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

答案 1 :(得分: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;
};

指定一个导致取消选中复选框的值。

点击检查所有将处理如下,

 $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