用angular实现多选按钮的全选与反选实例代码


Posted in Javascript onMay 23, 2017

在页面中我们常常会遇到多选框,例如购物车里的商品

下面用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
详解vue嵌套路由-params传递参数
May 23 #Javascript
详解vue嵌套路由-query传递参数
May 23 #Javascript
vue-router 中router-view不能渲染的解决方法
May 23 #Javascript
angular+webpack2实战例子
May 23 #Javascript
jquery实现图片轮播器
May 23 #jQuery
详解用node编写自己的cli工具
May 23 #Javascript
JavaScript 巧学巧用
May 23 #Javascript
You might like
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
详解Python中for循环的使用
2015/04/14 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Django 批量插入数据的实现方法
2020/01/12 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
python excel多行合并的方法
2020/12/09 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
金融管理应届生求职信
2014/02/20 职场文书
作文评语大全
2014/04/23 职场文书
锦旗标语大全
2014/06/23 职场文书
商铺门前三包责任书
2014/07/25 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python