您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了怎么用angular实现多选按钮的全选与反选，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
下面用angular来实现这一功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="select" ng-controller="moreSel">
全选: <input type="checkbox" ng-checked="checks" ng-click="checks = !checks; all(checks)">
<!--track by $index去掉也可以-->
<div ng-repeat="item in datas track by $index">
<input type="checkbox" ng-checked="chkItem[$index]" ng-click="ck(chkItem[$index]==undefind?false:chkItem[$index], item, $index)">{{ item }}
</div>
<pre>{{arr}}</pre>
</body>
<script>
//创建模块
angular.module("select", [])
//控制器
.controller("moreSel", function ($scope) {
$scope.datas = ["C++","Html","Javascript"];
$scope.arr = [];//用来显示选中的内容
//用来标志每一项的状态
$scope.chkItem = [];
//全选
$scope.all = function (checks) {
//初始化设置状态
init(checks);
//将选中的内容赋值到数组中
if(checks) {
for(var i = 0; i < $scope.datas.length; i++) {
$scope.arr[i] = $scope.datas[i];
}
}else {
$scope.arr = [];
}
}
//点击选择
$scope.ck = function (state, item, index) {
//取状态的相反值
$scope.chkItem[index] = !state;
//有一个为false则全选按钮为不选中
if(!$scope.chkItem[index]){
$scope.checks = false;
//取消选中，将数值从arr数组中删除掉
var num = $scope.arr.indexOf(item);
$scope.arr.splice(num, 1);
}else {
//选中追加进去
$scope.arr.push(item);
for(var i = 0; i < $scope.datas.length; i++) {
//只要有一个按钮没有选中
if(!$scope.chkItem[i]){
return;
}
}
//全部选中
$scope.checks = true;
}
}
//初始化
var init = function (sel) {
for(var i = 0; i < $scope.datas.length; i++) {
//sel没有值 默认初始化false
$scope.chkItem[i] = sel || false;
}
}
});
</script>
</html>感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用angular实现多选按钮的全选与反选”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。