angular全选反选批量删除

最新推荐文章于 2017-12-07 16:38:36 发布

小白的成长之路_

最新推荐文章于 2017-12-07 16:38:36 发布

阅读量288

点赞数

本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/78738225

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <script type="text/javascript" src="js/angular.min.js" ></script>
   <body ng-app="myapp" ng-controller="myctl">
       商品名<input type="text" ng-model="name" />
       价格<input type="text" ng-model="price" />
       数量<input type="text" ng-model="count" />
       <input type="button" value="添加" ng-click="add()" />
       <input type="button" value="批量删除" ng-click="pl()" /><br/>
       <table border="1px" cellpadding="0px" cellspacing="0px">
           <tr>
               <td><input type="checkbox" ng-model="flag" ng-click="qx()"/></td>
               <td>球类</td>
               <td>单价</td>
               <td>数量</td>
               <td>总价</td>
               <td>操作</td>
           </tr>

           <tr ng-repeat="good in goods">
               <td><input type="checkbox" ng-checked="dx" ng-click="cb($index)"/></td>
               <td>{{good.name}}</td>
               <td>{{good.price}}</td>
               <td>{{good.count}}</td>
               <td>¥{{good.price*good.count}}</td>
               <td><input type="button" value="删除" ng-click="dele($index)"/></td>
           </tr>
       </table>

       <script type="text/javascript">
              var mo=angular.module("myapp",[]);
              mo.controller("myctl",function($scope){
               //新建一个数组
               $scope.goods=new Array();

               $scope.add=function(){
                   //获取Text的值
                   var name=$scope.name;
                   var price=$scope.price;
                   var count=$scope.count;
                   //封装json添加到数组中
                   $scope.goods.push({"danxuan":false,"name":name,"price":price,"count":count});
               }

               $scope.dele=function($index){
                   //删除
                   $scope.goods.splice($index,1);
               };
               //全选/全不选
                $scope.qx=function(){
                   for(var i=$scope.goods.length-1;i>=0;i--){
                       $scope.goods[i].danxuan=$scope.flag;

}

//通过获取ng-model的值给ng-checked复制

                   $scope.dx=$scope.flag;
                }

               //每行的checkbox选择状态要改变数组的值
               $scope.cb=function($index){
                   $scope.goods[$index].danxuan=!$scope.goods[$index].danxuan;
               };

               //批量删除
               $scope.pl=function(){
                   //删除之后数组会改变所以要反着遍历
                   for(var i=$scope.goods.length-1;i>=0;i--){
                       var g = $scope.goods[i];
                       if(g.danxuan){
                           $scope.goods.splice(i,1);
                       }
                   }
                   //初始化checkbox的值
                   $scope.flag=false;
                   $scope.dx=false;
               };
              });
       </script>
   </body>
</html>