Angularjs bootstrap table多選（全選），支援單擊行選中
阿新 • • 發佈：2019-02-01
最終實現效果：
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.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;
};
});