Angularjs+bootstrap+table多选（全选）支持单击行选中实

最终实现效果：

index.html

   <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》      <script src="script.js">《script》    
  
    
     
        
           选择
        
序号
        
用户
        
备注
        
操作
      
    
    
      
        
        
        
            {{tddata}}        
        
           编辑           删除        
      
    
  
 
已选数量：{{count}}
 
已选对象：{{selectData}}
 

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;        //判断是否全选，选数量等于数据长度为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社区 其它相关文章！