Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

最终实现效果：

index.html

 
  
  
  
  
  
  
  
 
 
  
  

    

     

 

    选择
 
序号
 
用户
 
备注
 
操作
      
    
    

      

 

 

 

     {{tddata}}
 
 

    编辑
    删除
 
      
    
  
 已选数量：{{count}}
 已选对象：{{selectData}}

 

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多选（全选）支持单击行选中实现编辑、删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！