Angular多选、全选、批量选择操作实例代码


Posted in Javascript onMarch 10, 2017

在前台开发过程中,列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,但是原理基本相同,本文主要来讲AngularJs如何简单的实现列表批量选择功能。

首先来看html代码

<table cellpadding="0" cellspacing="0" border="0" class="datatable table table-hover dataTable">
      <thead>
      <tr>
        <th><input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"/></th>
        <th>姓名</th>
        <th>单位</th>
        <th>电话</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="item in content">
        <td><input type="checkbox" name="selected" ng-checked="isSelected(item.id)" ng-click="updateSelection($event,item.id)"/></td>
        <td>{{item.baseInfo.name}}</td>
        <td>{{item.orgCompanyName}}</td>
        <td>{{item.baseInfo.mobileNumberList[0].value}}</td>
      </tr>
      </tbody>
    </table>

html里面简单建立一个表格,与批量选择相关的只有两处。

一处是第3行 ng-click="selectAll($event)" ,用来做全选的操作; ng-checked="isSelectedAll() 用来判断当前列表内容是否被全选。

一处是第12行 ng-click="updateSelection($event,item.id) ,用来对某一列数据进行选择操作; ng-checked="isSelected(item.id) 用来判断当前列数据是否被选中。

然后需要在与该页面相对应的controller中实现与批量选择相关的方法

//创建变量用来保存选中结果
          $scope.selected = [];
          var updateSelected = function (action, id) {
            if (action == 'add' && $scope.selected.indexOf(id) == -1) $scope.selected.push(id);
            if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1);
          };
          //更新某一列数据的选择
          $scope.updateSelection = function ($event, id) {
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            updateSelected(action, id);
          };
          //全选操作
          $scope.selectAll = function ($event) {
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            for (var i = 0; i < $scope.content.length; i++) {
              var contact = $scope.content[i];
              updateSelected(action, contact.id);
            }
          };
          $scope.isSelected = function (id) {
            return $scope.selected.indexOf(id) >= 0;
          };
          $scope.isSelectedAll = function () {
            return $scope.selected.length === $scope.content.length;
          };

controller中主要是对html中用到的几个方法的实现,相对来讲实现代码还是比较简洁易懂的。

多选效果展示如下

Angular多选、全选、批量选择操作实例代码

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

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
javascript面向对象编程代码
Dec 19 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 #Javascript
Vue.js之slot深度复制详解
Mar 10 #Javascript
JS实现的自动打字效果示例
Mar 10 #Javascript
jquery实现的table排序功能示例
Mar 10 #Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 #Javascript
常用的js方法合集
Mar 10 #Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 #Javascript
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
常用的javascript设计模式
2017/01/11 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python转码问题的解决方法
2008/10/07 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python3 pygame实现接小球游戏
2019/05/14 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
天游软件面试
2013/11/23 面试题
网站编辑求职信
2013/10/17 职场文书
电子商务求职信
2014/06/15 职场文书
车辆年审委托书范本
2014/09/18 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL