在AngularJS中,可以通过使用ng-model指令和ng-checked指令来实现选中和取消选中所有静态复选框的功能。
首先,需要在控制器中定义一个布尔类型的变量,用于表示复选框的选中状态。例如:
$scope.selectAll = false;
然后,在HTML模板中,使用ng-model指令将该变量与全选复选框绑定起来:
<input type="checkbox" ng-model="selectAll" ng-click="toggleSelectAll()"> 全选
接下来,使用ng-checked指令将该变量与其他复选框的选中状态绑定起来:
<input type="checkbox" ng-model="item.selected" ng-checked="selectAll"> {{ item.name }}
在控制器中,定义一个toggleSelectAll函数,用于切换全选复选框的选中状态,并更新其他复选框的选中状态:
$scope.toggleSelectAll = function() {
angular.forEach($scope.items, function(item) {
item.selected = $scope.selectAll;
});
};
在上述代码中,$scope.items是一个包含所有复选框数据的数组。
这样,当点击全选复选框时,toggleSelectAll函数会被调用,将selectAll变量的值设置为全选复选框的选中状态,并通过遍历items数组,将每个复选框的选中状态与selectAll保持一致。
这样就实现了在AngularJS中选中所有和取消选中所有静态复选框的功能。
注意:以上代码是基于AngularJS 1.x版本的示例,如果使用的是AngularJS 2+版本,则需要使用ngModel和[(ngModel)]来实现双向绑定。
领取专属 10元无门槛券
手把手带您无忧上云