Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能的代码案例
这篇文章主要介绍了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多选（全选）支持单击行选中实现编辑、删除功能的代码案例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
JavaScript引擎：比较实施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
从C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
