溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用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多選支持單擊行選中實現編輯、刪除功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
