冬天地上扑的是雪，厚厚的，软软的；房上落的是雪，白皑皑的，又松又软；树上盖的是雪，积雪把树枝压弯了腰。太阳照在雪山上，发出耀眼的光芒。
在页面中我们常常会遇到多选框，例如购物车里的商品
下面用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实现多选按钮的全选与反选实例代码就介绍到这了。优秀是一种，越优秀就越想去，越努力就会越优秀。反过来也是一样，活得越差就越不想要去做些什么，或许是无力或许是真的太差了无从下手，于是越来越差，越差就越没动力去做，渐渐呆在舒适区，坐以待毙。更多相关用angular实现多选按钮的全选与反选实例代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！