用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 相关文章推荐
jquery提升性能最佳实践小结
Dec 06 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
js瀑布流布局的实现
Jun 28 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
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python实现比较两个列表(list)范围
2015/06/12 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python的高阶函数用法实例分析
2019/04/11 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Python通过len函数返回对象长度
2020/10/22 Python
SQL SERVER面试资料
2013/03/30 面试题
求职自荐书范文
2013/12/04 职场文书
书法大赛策划方案
2014/06/04 职场文书
2014年租房协议书范本
2014/10/30 职场文书
python如何在word中存储本地图片
2021/04/07 Python
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers