Rumah > Artikel > hujung hadapan web > Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能的代码案例

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

黄舟asal: 2017-03-27 14:36:202230semak imbas

这篇文章主要介绍了Angular js 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">
  <p 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>
 <p>已选数量：{{count}}</p>
 <p>已选对象：{{selectData}}</p>
</p>
 </body>
</html>

script.js

// Code goes here
var routerApp = angular.module(&#39;routerApp&#39;, [ &#39;ngAnimate&#39;, &#39;ngSanitize&#39;, 
                   &#39;ui.bootstrap&#39;]);
routerApp.controller(&#39;zdTable&#39;, [
    &#39;$scope&#39;,
    function(scope) {
      console.log(&#39;controller&#39;);
     //初始化数据
      scope.datas = [
        {name:&#39;admin1&#39;, rem:&#39;备注&#39;}, 
        { name:&#39;admin2&#39;, rem:&#39;备注&#39;}, 
        { name:&#39;admin3&#39;, rem:&#39;备注&#39;}
        ];
      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(&#39;filterTable&#39;, function() {
  return function(obj) {
    var newObj = {};
    for ( var i in obj) {
      var property = obj[i];
      if(i != &#39;checked&#39;){
        newObj[i] = property;
      }
    }
    //console.log(newObj);
    return newObj;
  };
});

Atas ialah kandungan terperinci Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能的代码案例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS实现数组去重的简单方法示例Artikel seterusnya：JS闭包用法的示例代码分享

Artikel berkaitan

Lihat lagi