如何使用AngularJS检查/取消选中所有复选框?
问题描述:
我是AngularJS中的新成员,尝试通过单击“引导”样式的“切换”按钮来实现检查/取消选中所有复选框。如何使用AngularJS检查/取消选中所有复选框?
标记:
<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检查,并取消选中所有复选框的代码,但它并没有考虑到,如果他们中的一些是手动选中/取消选中,这意味着它无法正常工作。
因此,我需要通过单击“切换”按钮来检查所有复选框,并将其名称更改为“取消全部”,无论是否选中某些复选框,反之亦然,即取消选中所有复选框并将其名称更改为“全部检查”,而不管是否选中某些复选框。
答
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>
我需要更改为按钮上的文本以及以下方式:当所有复选框都选中为“取消全部取消”,反之亦然。 – tesicg 2014-09-24 13:05:26
@tesicg以及只有一个“复选框”被选中时应该显示哪个按钮? – sylwester 2014-09-24 13:11:28
应该只有一个按钮,而不是两个。 – tesicg 2014-09-24 13:17:14