昨天自己写了一小段js，在全选的时候有点儿小坑，然后，整理了一下。今天把它贴出来，希望以后还记得。

大家也可以去github上查看或下载：https://github.com/dreamITGirl/projectStudy/tree/master/html

我在用angular实现表格的全选时，是给了一个标记--就是一个空数组，每次有个别项选中，我都会push一个数字，当有选项从选中状态到未选中变化时，我就让该数组弹出一个数字。这样就可以实现了。我实现的个别删除和全部删除是从页面删除的，并没有操作json对象，因此，在真正项目中使用的话，还需要加上ajax请求，同时删除服务器上的数据。

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格的全选，删除</title>
  6.     <link rel="stylesheet" href="../css/bootstrap.min.css"/>
  7.     <style type="text/css">
  8.         table th {
  9.             text-align: center;
  10.         }
  11.  
  12.         input[type="checkbox"] {
  13.             width: 20px;
  14.             height: 20px;
  15.         }
  16.     </style>
  17. </head>
  18. <body ng-app="myApp" ng-controller="myCtrl">
  19. <table border="" cellspacing="" cellpadding="" class="table" style="text-align: center;">
  20.     <tr>
  21.         <th><input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"/></th>
  22.         <th>姓名</th>
  23.         <th>年龄</th>
  24.         <th>性别</th>
  25.         <th>民族</th>
  26.         <th ng-click="delAll($event)" style="cursor:pointer">全部删除</th>
  27.     </tr>
  28.     <tr ng-repeat="item in items">
  29.         <td><input type="checkbox" ng-model="item.states" ng-change="selectOne(item.states)"/></td>
  30.         <td>{{item.name}}</td>
  31.         <td>{{item.age}}</td>
  32.         <td>{{item.sex}}</td>
  33.         <td>{{item.national}}</td>
  34.         <td ng-click="del($event)" style="cursor: pointer">删除</td>
  35.     </tr>
  36. </table>
  37. <script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
  38. <script type="text/javascript" src="../js/angular.js"></script>
  39. <script type="text/javascript">
  40.     var app = angular.module("myApp", []);
  41.     app.controller("myCtrl", function ($scope, $http) {
  42.         //设置默认为表格非全选
  43.         $scope.selectedAll = false;
  44.         $scope.state = [];
  45.         $http({
  46.             method: "GET",
  47.             url: "http://localhost:63342/projectStudy/json/selected.json"
  48.         }).then(function successCallback(response) {
  49.             console.log(response);
  50.             $scope.items = response.data.dataList;
  51.         }, function errorCallback(response) {
  52.             console.log(response)
  53.         });
  54.         //全选
  55.         $scope.selectAll = function () {
  56.             for (var i = 0; i < $scope.items.length; i++) {
  57.                 if ($scope.selectedAll) {
  58.                     $scope.items[i].states = true;
  59.                     $scope.state = [1, 1, 1, 1, 1];
  60.  
  61.                 } else {
  62.                     $scope.state = [];
  63.                     $scope.items[i].states = false;
  64.                 }
  65.                 console.log($scope.state)
  66.             }
  67.         };
  68.         //单选
  69.         $scope.selectOne = function (m) {
  70.  
  71.             if (m == true) {
  72.                 $scope.state.push(1);
  73.                 console.log($scope.state.length);
  74.                 if ($scope.state.length == $scope.items.length) {
  75.                     $scope.selectedAll = true
  76.                 } else {
  77.                     $scope.selectedAll = false;
  78.                 }
  79.                 console.log($scope.state);
  80.             } else {
  81.                 console.log(m);
  82.                 $scope.state.pop(1);
  83.                 $scope.changed(m);
  84.             }
  85.         };
  86.         $scope.changed = function (a) {
  87.             if (a == true) {
  88.                 $scope.state.push(1);
  89.  
  90.                 console.log($scope.state.length);
  91.                 if ($scope.state.length == $scope.items.length) {
  92.                     $scope.selectedAll = true
  93.                 } else {
  94.                     $scope.selectedAll = false;
  95.                 }
  96.             } else {
  97.                 console.log(a);
  98.                 $scope.selectedAll = false;
  99.             }
  100.         }
  101.         //删除单个选项
  102.         $scope.del = function (event) {
  103.             //样式的删除
  104.             console.log($(event.target).parent().html());
  105.             $(event.target).parent().remove();
  106.         }
  107.         //删除全部选项
  108.         $scope.delAll = function (event) {
  109.             if ($scope.selectedAll == true) {
  110. //                        console.log( $(event.target).siblings().html())
  111.                 $(event.target).parent().siblings().remove();
  112.                 $scope.selectedAll = false;
  113.             } else {
  114.                 alert('尚未选择要删除的项')
  115.             }
  116.         }
  117.  
  118.     })
  119. </script>
  120. </body>
  121. </html>

angular实现表格的全选、单选、部分删除以及全部删除的更多相关文章

  1. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  2. vue开发购物车，解决全选单选问题

    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...

  3. ElementUi 表格取消全选框，用文字表示

    Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...

  4. DataTable添加checkbox实现表格数据全选，单选（点选）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...

  5. 邮箱性质--全选单选的操作和传值 用属性的name传值

    封装类 using System; using System.Collections.Generic; using System.Web; /// <summary> /// Ha 的摘要 ...

  6. vue-实现全选单选

    在获取列表页面数据时,通过forEach遍历存储数据的对象,给对象中添加一个selected变量,值为布尔值. 点击全选时,通过遍历将对象中selected的布尔值改变 点击单选时,被点中的通过筛选加 ...

  7. JQuery实现表格的全选和反选，以及分页勾选保存（laypage插件分页的使用）

    需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...

  8. checkbox 全选 单选的使用

    绑定数据 if (!IsPostBack) { using (UsersDataContext con = new UsersDataContext()) { Repeater1.DataSource ...

  9. element-ui 里面el-checkbox多选框，实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

随机推荐

  1. mini2440 u-boot禁止蜂鸣器

    mini2440的u-boot版本启动之后马上就会开启蜂鸣器,在办公环境下有可能会影响同事的工作,所以我考虑将其禁止掉. 我使用的mini2440使用的光盘是2013年10月的版本,我在该光盘下的u- ...

  2. 算法（Algorithms）第4版 练习 1.3.15

    Queue: package com.qiusongde; import java.util.Iterator; import java.util.NoSuchElementException; im ...

  3. python增删改查zabbix主机等

    摘自: http://www.jianshu.com/p/e087cace8ddf 一.API简介 Zabbix API是在1.8版本中开始引进并且已经被广泛应用.所有的Zabbix移动客户端都是基于 ...

  4. mvn使用记录

    1. mvn dependency:copy-dependencies 会导出到targed/dependency 下面 2. mvn dependency:copy-dependencies -Do ...

  5. IoC~MVC3+EF+Autofac实现松耦合的系统架构

    MVC3+EF+Autofac网上这种文章确实没有,呵呵,今天就写一个,代大家分享! 这个系列的文章将带我们进入一种新的开发模式,注入开发模式,或者叫它IOC模式,说起IOC你可以这样去理解它,它为你 ...

  6. Python 连接Oracle数据库

    连接:python操作oracle数据库  python——连接Oracle数据库 python模块:cx_Oracle, DBUtil 大概步骤: 1. 下载模块 cx_Oracle (注意版本) ...

  7. intent实现Activity之间跳转的各种传值

    一.在Activity之间传递String类型的数据 传递 @Override public void onClick(View v) { String num1 = firstNum.getText ...

  8. animation-delay负值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. HihoCoder1656 : 前缀后缀查询（[Offer收割]编程练习赛39）（字典树+小技巧）

    描述 给定一个包含N个单词的字典:{W1, W2, W3, ... WN},其中第i个单词Wi有具有一个权值Vi. 现在小Hi要进行M次查询,每次查询包含一个前缀字符串Pi和一个后缀字符串Si.他希望 ...

  10. BZOJ_2111_[ZJOI2010]Perm 排列计数_树形DP+组合数学

    Description 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic ...