angular批量删除

最新推荐文章于 2020-07-18 19:31:53 发布

zhaochuang4858529

最新推荐文章于 2020-07-18 19:31:53 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/zhaochuang4858529/article/details/79062846

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.js"></script>
       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
       $scope.goods=[{
       name:"鼠标",
       num:20,
        dan:100,
       flag:false
       },{
       name:"键盘",
       num:10,
       dan:300,
       flag:false
       },{
       name:"主机",
       num:50,
       dan:600,
       flag:false
       }];
       $scope.dele=function($index){
           $scope.goods.splice($index,1);
       }
       //批量删除点击事件加按钮
       $scope.shan=function(){
           for (var i =$scope.goods.length-1; i >=0 ; i--) {

               if($scope.goods[i].flag){
                   $scope.goods.splice(i,1);
               }
           }
       }
       //复选框点击事件，当点击时为true
       $scope.dx = function($index){
           $scope.goods[$index].flag=!$scope.goods[$index].flag;

       }

   //复选框全选
       $scope.selall=function(){
           var aa=$scope.qx;
           for (var i = 0; i < $scope.goods.length; i++) {
               $scope.goods[i].flag=aa;
           }
       }

      });

       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
   <input type="button" value="批量删除" ng-click="shan()" />
       <table border="1">
           <tr>
               <td><input type="checkbox" ng-model="qx" ng-click="selall()"/></td>
               <td>商品名称</td>
               <td>数量</td>
               <td>单价</td>
               <td>小计</td>
           </tr>
           <tr ng-repeat="x in goods">
               <td><input type="checkbox" ng-checked="qx" ng-click="dx($index)"/></td>
               <td>{{x.name}}</td>
               <td>{{x.num}}</td>
               <td>{{x.dan |currency:"￥"}}</td>
               <td>{{x.num*x.dan}}</td>
               <td><input type="button" ng-click="dele($index)" value="删除""/></td>
           </tr>
       </table>
   </body>
</html>

zhaochuang4858529

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular批量删除

var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.goods=[{ name:"鼠标", num:20, dan:100, flag:false
复制链接

扫一扫