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

tangjin

作者

小编给大家分享一下如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

最终实现效果：

index.html

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<scriptsrc="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>
<linkhref="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="externalnofollow"rel="stylesheet">
<linkrel="stylesheet"href="style.css"rel="externalnofollow">
<scriptsrc="script.js"></script>
</head>
<bodyng-app="routerApp">
<divng-controller="zdTable">
<tableclass="tabletable-bordered">
<thead>
<tr>
<th>
<inputtype="checkbox"ng-model="selectAll"ng-change="changeAll()"/>选择</th>
<th>序号</th>
<th>用户</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<trng-repeat="rowindatas"ng-init="outerIndex=$index"ng-click="changeCurrents(row,$event)">
<td><inputtype="checkbox"ng-model="row.checked"ng-click="changeCurrent(row,$event)"/></td>
<tdng-bind="outerIndex+1"></td>
<tdng-repeat="tddatainrow|filterTable">
{{tddata}}
</td>
<td>
<buttontype="button"class="btnbtn-info"ng-click="zdTableEdit(row,$event)">编辑</button>
<buttontype="button"class="btnbtn-danger"ng-click="zdTableRemove(row,$event)">删除</button>
</td>
</tr>
</tbody>
</table>
<div>已选数量：{{count}}</div>
<div>已选对象：{{selectData}}</div>
</div>
</body>
</html>

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多选支持单击行选中实现编辑、删除功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-07-09 21:17:53

angularjs