用angular实现多选按钮的全选与反选实例代码
网络编程 2021-07-04 18:32www.168986.cn编程入门
本篇文章主要介绍了用angular实现多选按钮的全选与反选实例代码,非常具有实用价值,需要的朋友可以参考下
在页面中我们常常会遇到多选框,例如购物车里的商品
狼蚁网站SEO优化用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程