angular 的表格输入添加和批量删除_angular.js怎么在table列表每一行添加一列输入框-优快云博客

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

这篇博客介绍了如何在AngularJS应用中实现表格数据的添加和批量删除功能。首先展示了HTML结构，包括输入框、添加和批量删除按钮以及数据表格。接着通过AngularJS的模块和控制器定义，创建了一个名为`myCtrl`的控制器，并在其中定义了`goods`数组用于存储数据。`add()`方法用于添加新的商品，`xz()`方法根据复选框状态切换商品的`flag`属性，而`plsc()`方法则实现了批量删除选中商品的功能。

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

//导包

//首先要<body ng-app="myApp" ng-controller="myCtrl">

接着要

//在这里进行操作的代码

});

这是固定格式

//下面开始展示案例

//先布局

<input type="text" ng-model="gname" />
<input type="button" ng-click="add()" value="添加" />
<input type="button" value="批量删除" ng-click="plsc()" />
<table border="1px" cellspacing="0px" cellpadding="0px">
  <tr ng-repeat="g in goods">
   <td><input type="checkbox" ng-click="xz($index)"></td>
   <td>{{g.gname}}</td> </tr>
</table>

//开始调用script方法

//定义数组
$scope.goods = [{"flag":false,"gname":"凹凸曼"}];

//调用添加按钮并且实施方法
$scope.add = function(){

//创建对象
var good = {"flag":false,"gname":$scope.gname};

将对象放入数组
$scope.goods.push(good);

//像table的第一行添加数据

//     $scope.goods.unshift();

   }

//根据复选框的索引来改变flag的值
   $scope.xz = function($index){
    $scope.goods[$index].flag = ! $scope.goods[$index].flag;
   }

//开始设置批量删除的方法
$scope.plsc = function(){

//反着遍历数组
    for(var i=$scope.goods.length-1;i>=0;i--){
     var g = $scope.goods[i];
     if(g.flag){
      $scope.goods.splice(i,1);
     }
    }
   }
  });
</script>