如何检查/取消使用AngularJS所有复选框？ [英] How to check/uncheck all check boxes using AngularJS?

问题描述

我在AngularJS新努力实现支票/点击切换按钮，这是自举样式取消所有复选框。

标记：

 ＆LT;按钮ID =切换级=BTN BTN-链接BTN-迷你NG点击=setActionTypesAllCheck（）＆GT;检查所有＆LT; /按钮＆GT;＆LT; D​​IV CLASS =排液NG重复=在actionsQuery.actionTypes＆GT;
＆LT; D​​IV CLASS =复选框＆GT;
    ＆LT;标签＆gt;＆LT;输入类型=复选框NG模型=at.checked＆GT; {{at.Description}}＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  $ scope.setActionTypesAllCheck =功能（）{
    $。每个（$ scope.actionsQuery.actionTypes，功能（我，CB）{
        ！cb.checked = cb.checked;
    }）;
};
 

在这一刻code在JavaScript中的检查，并取消选中所有复选框，但如果他们中的一些是手工选中/取消选中它并没有考虑到，这意味着它不能正常工作。

所以，我需要通过点击切换按钮，选中所有复选框，将其名称更改为全部取消选中不管一些复选框被选中与否，反之亦然，即取消所有复选框，其名称更改为检查所有不管一些复选框被选中与否。

解决方案

\r

\r

VAR应用= angular.module（应用程序，[]）;\r
\r
\r
功能MainCtrl（）{\r
\r
  VAR VM =这一点;\r
  vm.message =欢迎;\r
  vm.actionsQuery =\r
\r
    {\r
      actionTypes：\r
\r
        {\r
          检查：真实，\r
          说明：乔恩\r
        }，{\r
          检查：假的，\r
          说明：盂兰盆\r
        }，{\r
          检查：假的，\r
          说明：蒂姆\r
        }\r
\r
      ]\r
    };\r
  vm.selected =功能（）{\r
\r
\r
  }\r
  vm.checkoxesState =真;\r
\r
  vm.UpdateCheckboxes =功能（）{\r
\r
\r
    angular.forEach（vm.actionsQuery.actionTypes，功能（AT）{\r
\r
      at.checked = vm.checkoxesState;\r
\r
    }）;\r
    vm.checkoxesState =！this.checkoxesState\r
\r
\r
  };\r
\r
\r
\r
\r
}\r
\r
\r
\r
\r
\r
angular.module（应用程序），控制器（MainCtrl，MainCtrl）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; HTML NG-应用=应用程序＆GT;\r
\r
＆LT;机身NG控制器=MainCtrl为VM＆GT;\r
  ＆LT; D​​IV CLASS =容器＆GT;\r
    ＆LT; H3＆GT; {{vm.message}}＆LT; / H3 GT＆;\r
＆LT;形式为GT;\r
    ＆LT;按钮ID =切换级=BTN BTN-链接BTN-迷你NG点击=vm.UpdateCheckboxes（）＆GT;\r
      ＆LT;跨度NG秀=vm.checkoxesState＆GT;检查所有与LT; / SPAN＆GT;\r
      ＆LT;跨度NG隐藏=vm.checkoxesState＆GT;全部取消＆LT; / SPAN＆GT;\r
    ＆LT; /按钮＆GT;\r
\r
\r
    ＆LT; D​​IV CLASS =排液NG重复=在vm.actionsQuery.actionTypes＆GT;\r
      ＆LT; D​​IV CLASS =复选框＆GT;\r
        ＆LT;标签＆gt;\r
          ＆LT;输入类型=复选框NG模型=at.checked＆GT; {{at.Description}}＆LT; /标签＆gt;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; /表及GT;\r
\r
  ＆LT; / DIV＆GT;\r
\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r

\r

I'm new in AngularJS and trying to achieve check/uncheck all check boxes by clicking "toggle" button, which is styled by bootstrap.

Markup:

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

At this moment the code in JavaScript checks and unchecks all check boxes, but it doesn't take into account if some of them was manually checked/unchecked, which means it doesn't work properly.

So, I need to check all check boxes by clicking "toggle" button and change its name to "Uncheck all" no matter if some of check boxes is checked or not and vice versa, that is to uncheck all check boxes and change its name to "Check all" no matter if some of check boxes is checked or not.

解决方案

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

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

这篇关于如何检查/取消使用AngularJS所有复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！