这篇文章主要介绍了angularjs bootstrap table多选（全选）支持单击行选中实现编辑、删除功能,需要的朋友可以参考下
最终实现效果：
index.html
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<link rel="stylesheet" href="style.css" rel="external nofollow" >
<script src="script.js"></script>
</head>
<body ng-app="routerapp">
<p ng-controller="zdtable">
<table class="table table-bordered" >
<thead>
<tr>
<th>
<input type="checkbox" ng-model="selectall" ng-change="changeall()" /> 选择</th>
<th>序号</th>
<th>用户</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in datas" ng-init="outerindex = $index" ng-click="changecurrents(row, $event)">
<td><input type="checkbox" ng-model="row.checked" ng-click="changecurrent(row, $event)" /></td>
<td ng-bind="outerindex+1"></td>
<td ng-repeat="tddata in row | filtertable">
{{tddata}}
</td>
<td>
<button type="button" class="btn btn-info" ng-click="zdtableedit(row, $event)">编辑</button>
<button type="button" class="btn btn-danger" ng-click="zdtableremove(row, $event)">删除</button>
</td>
</tr>
</tbody>
</table>
<p>已选数量：{{count}}</p>
<p>已选对象：{{selectdata}}</p>
</p>
</body>
</html>
script.js
// code goes here
var routerapp = 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() {
return function(obj) {
var newobj = {};
for ( var i in obj) {
var property = obj[i];
if(i != 'checked'){
newobj[i] = property;
}
}
//console.log(newobj);
return newobj;
};
});
以上就是angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能的代码案例的详细内容。