Angularjs bootstrap table多选（全选），支持单击行选中
最终实现效果：
index.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="stylesheet"><link rel="stylesheet" href="style.css"><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 herevar 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;//判断是否全选，选数量等于数据长度为truescope.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;};
});在线Demo(plunker可能需要翻墙):http://plnkr.co/edit/paA8Fz?p=preview
源码下载：http://download.csdn.net/detail/opingu/9722685
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！