angular 的表格输入添加和批量删除

来源：互联网发布：道路施工常用数据手册编辑：程序博客网时间：2024/05/17 04:15

//导包

//首先要<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>

阅读全文

0 0