Question

我是AngularJS的新手，并尝试通过单击“toggle”按钮来检查/取消选中所有复选框，该按钮由bootstrap设置。

标记：

<button id="toggle" class="btn btn-link btn-mini" ng-click="setActionTypesAllCheck()">Check all</button>

<div class="row-fluid" ng-repeat="at in actionsQuery.actionTypes">
<div class="checkbox">
    <label><input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
</div>
</div>

JavaScript的：

$scope.setActionTypesAllCheck = function () {
    $.each($scope.actionsQuery.actionTypes, function (i, cb) {
        cb.checked = !cb.checked;
    });
};

此时，JavaScript中的代码会检查并取消选中所有复选框，但如果手动选中/取消选中其中一些复选框，则不会考虑，这意味着它无法正常工作。

因此，我需要通过单击“切换”按钮检查所有复选框，并将其名称更改为“取消全部检查”，无论是否选中某些复选框，反之亦然，即取消选中所有复选框，无论是否选中某些复选框，都将其名称更改为“全部检查”。

Answer 1

＆＃13;

var app = angular.module("app", []);


function MainCtrl() {

  var vm = this;
  vm.message = "Welcome";
  vm.actionsQuery =

    {
      actionTypes: [

        {
          checked: true,
          Description: "Jon"
        }, {
          checked: false,
          Description: "Bon"
        }, {
          checked: false,
          Description: "Tim"
        }

      ]
    };
  vm.selected = function() {


  }
  vm.checkoxesState = true;

  vm.UpdateCheckboxes = function() {


    angular.forEach(vm.actionsQuery.actionTypes, function(at) {

      at.checked = vm.checkoxesState;

    });
    vm.checkoxesState = !this.checkoxesState


  };




}





angular.module("app").controller("MainCtrl", MainCtrl);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">

<body ng-controller="MainCtrl as vm">
  <div class="container">
    <h3>{{vm.message}}</h3>
<form>
    <button id="toggle" class="btn btn-link btn-mini" ng-click="vm.UpdateCheckboxes()">
      <span ng-show="vm.checkoxesState">   Check all </span>
      <span ng-hide="vm.checkoxesState">   Uncheck All </span>
    </button>


    <div class="row-fluid" ng-repeat="at in vm.actionsQuery.actionTypes">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
      </div>
    </div>
  </form>

  </div>

</body>

</html>

＆＃13;

Answer 2

我一直在使用this指令用于复选框。它很简单，并且有你需要的例子。

如何使用AngularJS检查/取消选中所有复选框？

2 个答案: