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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
Javascript简单实现可拖动的div
2013/10/22 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python最基本的输入输出详解
2015/04/25 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python实现12306火车票查询器
2017/04/20 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python进行TCP端口扫描的实现
2018/12/21 Python
详解Python3 pickle模块用法
2019/09/16 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
党员违纪检讨书
2014/02/18 职场文书
建筑工地标语
2014/06/18 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
调解书格式范本
2015/05/20 职场文书