在前台开发过程中,列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,但是原理基本相同,本文主要来讲AngularJs如何简单的实现列表批量选择功能。
首先来看html代码
html里面简单建立一个表格,与批量选择相关的只有两处。
一处是第3行 ng-click="selectAll($event)"
,用来做全选的操作; ng-checked="isSelectedAll()
用来判断当前列表内容是否被全选。
一处是第12行 ng-click="updateSelection($event,item.id)
,用来对某一列数据进行选择操作; ng-checked="isSelected(item.id)
用来判断当前列数据是否被选中。
然后需要在与该页面相对应的controller中实现与批量选择相关的方法
= 0;
};
$scope.isSelectedAll = function () {
return $scope.selected.length === $scope.content.length;
};
controller中主要是对html中用到的几个方法的实现,相对来讲实现代码还是比较简洁易懂的。
多选效果展示如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
相关文章
kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小