下面是一个使用AngularJS的多选框全选的代码示例:
HTML代码:
-
JavaScript代码:
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.selectAll = false;
$scope.items = [
{name: 'Item 1', isSelected: false},
{name: 'Item 2', isSelected: false},
{name: 'Item 3', isSelected: false}
];
$scope.toggleSelectAll = function() {
angular.forEach($scope.items, function(item) {
item.isSelected = $scope.selectAll;
});
};
$scope.$watch('items', function(newValue, oldValue) {
var allSelected = true;
angular.forEach($scope.items, function(item) {
if (!item.isSelected) {
allSelected = false;
}
});
$scope.selectAll = allSelected;
}, true);
}]);
这个示例中,有一个全选复选框和一些子选项复选框。当全选复选框被选中时,所有子选项复选框也会被选中。当任何一个子选项复选框取消选中时,全选复选框也会取消选中。