Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能
更新时间：2017年03月27日 11:20:03 作者：小思思smile
这篇文章主要介绍了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">
<div 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>
<div>已选数量：{{count}}</div>
<div>已选对象：{{selectData}}</div>
</div>
</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多选（全选）支持单击行选中实现编辑、删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍了详解Monaco Editor中的Keybinding机制详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了AngularJS表单验证功能,结合具体实例形式分析了AngularJS表单验证的操作步骤、实现技巧与相关注意事项,需要的朋友可以参考下2017-05-05
本篇文章主要介绍了Angular4学习笔记router的简单使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Angular 4依赖注入学习教程之Injectable装饰器（六）
这篇文章主要给大家介绍了关于Angular 4依赖注入之Injectable装饰器的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。2017-06-06
这篇文章主要给大家介绍了Angular.JS通过指令操作DOM的方法，文中给出了详细的介绍和示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了详解Angular5 路由传参的3种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
全面解析Angular中$Apply()及$Digest()的区别
$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。这篇文章主要介绍了Angular中$Apply()及$Digest()区别详细说明的相关资料,需要的朋友可以参考下2016-08-08
$http是angular中的一个核心服务，本篇文章主要介绍了angularJS之$http：与服务器交互示例，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
本文给大家分享的是通过angular中的$compile源码进行分析，从而更好的理解angular的使用，非常的不错，希望大家能够喜欢。2016-01-01
angular安装import echarts from‘echarts‘标红报错解决
这篇文章主要介绍了angular安装import echarts from‘echarts‘标红报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
最新评论