Angularjs bootstrap table多选(全选),支持单击行选中

最终实现效果:
Angularjs bootstrap table多选(全选),支持单击行选中_第1张图片

index.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 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;
    };
});

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

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

你可能感兴趣的:(angularjs)