Angularjs引导表多选（全选)支持单击行选中实现编辑、删除功能

最终实现效果：

index.html

！DOCTYPE html html头部脚本src=' http://Ajax。谷歌API。com/Ajax/libs/angular js/1。5 .8/棱角分明。js '/script script src=' http://Ajax。谷歌API。com/Ajax/libs/angular js/1。5 .8/角度-动画。js '/script script src=' http://Ajax。谷歌API。com/Ajax/libs/angular js/1选择/th序号/th用户/th备注/th操作/th/tr/TD t body tr ng-repeat='数据中的行ng-init=' outindex=$ index ' ng-click='更改电流(行，$ event)t输入类型=' checkbox ' ng-model=' row。选中“ng-click=”更改当前(行，$ event)'//TD TD ng-bind=' outindex 1 '/TD TD TD ng-repeat='行中的tddata |筛选器表“{ tddata } }/TD TD TD按钮类型=' button ' class=' BTN BTN-info ' ng-t编辑/button button type=' button ' class=' BTN BTN-危险' ng-click=' zdTableRemove(row，$event)'删除/button /td /tr /tbody /table div已选数量：{{count}}/div已选对象：{ { SelectDATa } }/div/div/body/html脚本。射流研究…

//代码如下var routerApp=angular。模块(' routerApp '，[ 'ngAnimate '，' ngSanitize '，' ui。bootstrap '])；routerApp.controller('zdTable '，[ '$scope '，function(scope){ console。日志('控制器')；//初始化数据scope.datas=[ {name:'admin1 '，rem: '备注}，{ name:'admin2 '，rem: '备注}，{ name:'admin3 '，rem: '备注'} ];范围。计数=0；//已选择数量范围。select data=[]；//已选对象//选择单个（取消选择单个范围。changecurrent=function(current，$event) { //计算已选数量真实的加，假的减scope.count=current.checked？1 : -1;//判断是否全选，选数量等于数据长度为真正的范围。selectall=作用域。count===作用域。数据。长度；//统计已选对象范围。select data=[]；angular.forEach(scope.datas)，function(item){ if(item。选中){ scope。选择数据[范围。选择数据。长度]=项目；} });$事件。stopperpagation()；//阻止冒泡};//单击行选中范围。change currents=function(current，$ event){ if(current。选中==未定义){当前。选中=真；}else{ current.checked=！current . checked } scope . change current(current，$ event)；};//全选（取消全选范围。changeall=function(){//console。日志(范围。selectall)；angular.forEach(scope.datas)，function(item){ item。选中=范围。选择全部；});scope.count=scope.selectAll？范围。数据。长度： 0；if(范围。selectall){ scope。selectdata=作用域。数据；} else { scope。select data=[]；} };//编辑事件范围。zdtableedit=function(item，$ event){ console。日志(项目)；$事件。stopperpagation()；//阻止冒泡};//删除事件范围。zdtableremove=function(item，$ event){ console。日志(项目)；$事件。stopperpagation()；//阻止冒泡};} ]);//去掉不需要显示的字段routerApp.filter('filterTable '，function(){ return function(obj){ var new obj={ }；for(var I in obj){ var property=obj[I]；如果（我！='选中'){ newObj[i]=属性；} }//控制台。日志(NewObj)；返回newObj }；});以上所述是小编给大家介绍的Angularjs引导表多选（全选)支持单击行选中实现编辑、删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！