用angular实现多选按钮的全选与反选实例代码
程序员文章站
2022-07-06 14:34:09
在页面中我们常常会遇到多选框，例如购物车里的商品
下面用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。