如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能

选择
序号
用户
备注
操作







{{tddata}}


编辑
删除




已选数量：{{count}}
已选对象：{{selectData}}

script.js

//Codegoeshere
varrouterApp=angular.module('routerApp',['ngAnimate','ngSanitize',
'ui.bootstrap']);
routerApp.controller('zdTable',[
'$scope',
function(scope){
console.log('controller');
//初始化数据
scope.datas=[
{name:'admin1',rem:'备注'},
{name:'admin2',rem:'备注'},
{name:'admin3',rem:'备注'}
];
scope.count=0;//已选择数量
scope.selectData=[];//已选对象
//选择单个（取消选择单个
scope.changeCurrent=function(current,$event){
//计算已选数量true加，false减
scope.count+=current.checked?1:-1;
//判断是否全选，选数量等于数据长度为true
scope.selectAll=scope.count===scope.datas.length;
//统计已选对象
scope.selectData=[];
angular.forEach(scope.datas,function(item){
if(item.checked){
scope.selectData[scope.selectData.length]=item;
}
});
$event.stopPropagation();//阻止冒泡
};
//单击行选中
scope.changeCurrents=function(current,$event){
if(current.checked==undefined){
current.checked=true;
}else{
current.checked=!current.checked;
}
scope.changeCurrent(current,$event);
};
//全选（取消全选
scope.changeAll=function(){
//console.log(scope.selectAll);
angular.forEach(scope.datas,function(item){
item.checked=scope.selectAll;
});
scope.count=scope.selectAll?scope.datas.length:0;
if(scope.selectAll){
scope.selectData=scope.datas;
}else{
scope.selectData=[];
}
};
//编辑事件
scope.zdTableEdit=function(item,$event){
console.log(item);
$event.stopPropagation();//阻止冒泡
};
//删除事件
scope.zdTableRemove=function(item,$event){
console.log(item);
$event.stopPropagation();//阻止冒泡
};
}]);
//去掉不需要显示的字段
routerApp.filter('filterTable',function(){
returnfunction(obj){
varnewObj={};
for(variinobj){
varproperty=obj[i];
if(i!='checked'){
newObj[i]=property;
}
}
//console.log(newObj);
returnnewObj;
};
});

以上是“如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！