用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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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实现数字补零功能的2个函数介绍
2014/05/12 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php给图片加文字水印
2015/07/31 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
Java语言的优势
2015/01/10 面试题
微型企业创业投资计划书
2014/01/10 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
文明村创建实施方案
2014/03/27 职场文书
股东授权委托书
2014/10/15 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技