用angular实现多选按钮的全选与反选实例代码
更新时间：2017年05月23日 10:01:20 作者：安静的对折
本篇文章主要介绍了用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用AngularJS处理单选框和复选框的方法,在AngularJS表单的基础之上编写起来非常简单,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了angular.bind使用心得，以及个人对于angular.bind的理解，这里分享给大家，希望大家能够喜欢。2015-10-10
本文主要介绍AngularJS 输入验证,这里对AngularJS 输入验证的资料做了整理,并附简单实例代码和效果图,有需要的小伙伴参考下2016-07-07
Angular中ng update命令force参数含义详解
这篇文章主要为大家介绍了Angular中ng update命令force参数含义详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
下面小编就为大家带来一篇浅谈angularjs module返回对象的坑(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
AngularJS学习笔记之基本指令(init、repeat)
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。ng-init 指令初始化应用程序数据。ng-model 指令把应用程序数据绑定到 HTML 元素。2015-06-06
这篇文章主要介绍了浅谈angularJS 作用域的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了详解ng-alain动态表单SF表单项设置必填和正则校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了由浅入深剖析Angular表单验证 的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了AngularJS手动表单验证的相关资料，AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证，本文重点介绍AngularJS自动表单验证，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论