angular 全选举例如下
// html代码
<body ng-app="app">
<div>
<--全选功能-->
<input type="checkbox" name="checkbox" ng-model="all" ng-click="updateAll(all)" ng-checked="all">全选
<div>
<span ng-repeat="row in list">
<input type="checkbox" name="row.name" value="row.id" ng-click="updateSelect($event,row.id)" ng-checked="isSelected(row.id)" ng-model="all">
</span>
<label for="{{row.id}}">{{row.name}}</label>
</div>
</div>
</body>
// 控制器逻辑处理
var control = app.module('textController', function($scope){
$scope.all = false;// 判断是否为全选
$scope.list = []; // 用来保存数据
$scope.selected = [];//用来存储选中的复选框
//调用api获取list值，赋值给$scope.list
// 判断是否为全选
$scope.updateAll = function(val) {
if(!val) {
$scope.selected = [];
$scope.list.forEach( row => {
// 向后端发送选中数据的id。如果要发送一个对象，则可以将$scope.list直接赋值给$scope.selected
$scope.selected.push(row.id);
})
}else {
// 置空选中的数组
$scope.selected = [];
}
}
// 判断选中的复选框
$scope.updateSelect = function($event,id) {
let checkbox = $event.target;
let action = (checkbox.checked ? 'add' : 'delete')
if(action == 'add' && $scope.selected.indexOf(id) == -1) {
$scope.selected.push(id);
}
if(action == 'delete' && $scope.selected.indexOf(id) != -1) {
let idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx,1);
}
if($scope.selected.length == $scope.list.length) {
$scope.all = true;
}else {
$scope.all = false;
}
}
// 判断是否选中
$scope.isSelected = function(id) {
return $scope.selected.indexOf(id) >= 0;
}
})