用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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
vue实现移动端返回顶部
Oct 12 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP程序守护进程化实现方法详解
2020/07/16 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
JSON获取属性值方法代码实例
2020/06/30 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
python追加元素到列表的方法
2015/07/28 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
使用Django清空数据库并重新生成
2020/04/03 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
家长评语大全
2014/01/22 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
国家助学金感谢信
2015/01/21 职场文书
项目合作意向书
2015/05/08 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python