用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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
基于复选框demo(分享)
Sep 27 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
js数组的基本使用总结
Jan 18 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
详解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
一个取得文件扩展名的函数
2006/10/09 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php制作简单模版引擎
2016/04/07 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
PHP实现递归的三种方法
2020/07/04 PHP
Javascript 入门基础学习
2010/03/10 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
python打开网页和暂停实例
2014/09/30 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python用700行代码实现http客户端
2021/01/14 Python
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
说明书怎么写
2014/05/06 职场文书
个人担保书格式范文
2014/05/12 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
酒店温馨提示语
2015/07/14 职场文书