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

来源：互联网发布：国外mac破解软件网站编辑：程序博客网时间：2024/05/16 18:50

最终实现效果：
最终效果

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="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;                //判断是否全选，选数量等于数据长度为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;    };});

在线Demo(plunker可能需要翻墙):http://plnkr.co/edit/paA8Fz?p=preview

源码下载：http://download.csdn.net/detail/opingu/9722685

0 0