angular 输入添加，全选，批量删除表格数据

最新推荐文章于 2021-03-09 15:29:25 发布

yedaiyang

最新推荐文章于 2021-03-09 15:29:25 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yedaiyang/article/details/78745029

这个示例展示了如何在AngularJS应用中实现表格数据的添加、全选和批量删除功能。用户可以通过输入框添加商品名称，点击添加按钮将新条目添加到表格中。全选按钮可以选中所有商品，单击某个商品可以切换其选中状态。批量删除功能会移除所有被选中的商品记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//还是先导入包

<body ng-app="myApp" ng-controller="myCtrl">

<input type="text" ng-model="name" />
<input type="button" ng-click="add()" value="添加" />
<input type="button" value="批量删除" ng-click="piliang()" /><br /><br />
<table border="1px" cellpadding="0px" cellspacing="0px">
  <tr>
   <td><input type="checkbox" ng-click="quan()">全选</td>
   <td>商品名称</td>
  </tr>
  <tr ng-repeat="qiu in qius">
   <td><input type="checkbox" ng-click="dianji($index)" name="cb"></td>
   <td>{{qiu.name}}</td>
  </tr>
</table>

<script>
  var mo = angular.module("myApp",[]);
  mo.controller("myCtrl",function($scope){
   //定义数组
    $scope.qius = [{"flag":false,"name":"凹凸曼"}];
//调用添加按钮并且实施方法
   $scope.add = function(){
//创建对象
    var qiu = {"flag":false,"name":$scope.name};
//将对象放入数组
    $scope.qius.push(qiu);
}
   //固定添加数据
   $scope.qius = [
   {"name":"大炮哥","flag":false},
   {"name":"张大炮","flag":false},
   {"name":"斯内克","flag":false}
   ];
   //单个checkbox状态改变
   $scope.dianji = function($index){
    $scope.qius[$index].flag = !$scope.qius[$index].flag;
   }
   //全选
   var f = true;
   $scope.quan = function(){
    var cbs = $("input[name = cb]");
    for(var i=0;i<cbs.length;i++){
     var cb = cbs[i];
     cb.checked = f;
     //将数组里面的值改变
     $scope.qius[i].flag=f;
    }
    f=!f;
   }
   //批量删除
   $scope.piliang = function(){
    for(var i=$scope.qius.length-1;i>=0;i--){
     var qiu = $scope.qius[i];
     if(qiu.flag){
      $scope.qius.splice(i,1);
     }
    }
   }
  });
</script>