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

首页

web前端

js教程

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

黄舟

Mar 27, 2017 pm 02:36 PM

这篇文章主要介绍了Angular js bootstrap table多选（全选）支持单击行选中实现编辑、删除功能,需要的朋友可以参考下

最终实现效果：

Angularjs+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;
  };
});

以上是Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能的代码案例的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。