批量删除+单个删除+全选反选

最新推荐文章于 2022-06-29 15:04:22 发布

人道烘炉_L

最新推荐文章于 2022-06-29 15:04:22 发布

阅读量630

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/My_emotions_L/article/details/78736991

本文介绍了一个使用AngularJS实现的基本购物车应用案例。该应用具备添加商品、删除商品及批量删除的功能，并通过ng-model实现了数据双向绑定。同时，文章展示了如何使用ng-repeat指令来遍历商品列表。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">

       商品名<input type="text" ng-model="gname"/>
       单价<input type="text" ng-model="gprice"/>
       数量<input type="text" ng-model="gnum"/>
       <input type="button" value="添加" ng-click="add()"/>
       <input type="button" value="批量删除" ng-click="piliang()"/>
       <table border="1px" cellspacing="0px" cellpadding="0px">
           <thead>
               <tr>
                   <td><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></td>
                   <td>商品名</td>
                   <td>单价</td>
                   <td>数量</td>
                   <td>总额</td>
                   <td>操作</td>
               </tr>
           </thead>
           <tr ng-repeat="g in goods">
               <td><input type="checkbox" ng-click="xuanzhong($index)" ng-model="g.flag"/></td>
               <td>{{g.gname}}</td>
               <td>{{g.gprice}}</td>
               <td>{{g.gnum}}</td>
               <td>{{g.gprice*g.gnum}}</td>
               <td><button ng-click="dle($index)">删除</button></td>
           </tr>
       </table>

       <script type="text/javascript">
           var mo = angular.module("myApp",[]);
           mo.controller("myCtrl",function($scope){

               //定义数组
               $scope.goods = [{"flag":false,"gname":"足球","gprice":3,"gnum":6},
                                {"flag":false,"gname":"篮球","gprice":8,"gnum":3},
                                {"flag":false,"gname":"棒球","gprice":10,"gnum":4}];

               //添加
               $scope.add = function(){

                   //创建对象
                   var good = {"flag":false,"gname":$scope.gname,"gprice":$scope.gprice,"gnum":$scope.gnum};
                   //将对象放入数组
                   $scope.goods.push(good);
//                   $scope.goods.unshift();//向第一个位置添加

               }
               //根据复习框的索引，改变flag值
//               $scope.xuanzhong = function($index){
//                   $scope.goods[$index].flag = !$scope.goods[$index].flag;
//               }
               //批量删除
               $scope.piliang = function(){
                   //反着遍历
                   for(var i = $scope.goods.length-1;i>=0;i--){
                       var g = $scope.goods[i];
                       if(g.flag){
                           $scope.goods.splice(i,1);
                       }
                   }
               }
               //单个删除
               $scope.dle=function($index){
                   $scope.goods.splice($index,1);
               }

               //单选全选

                $scope.all= function (m) {
                    for(var i=0;i<$scope.goods.length;i++){
                      if(m===true){
                          $scope.goods[i].flag=true;
                      }else {
                          $scope.goods[i].flag=false;
                      }
                    }
                };

           });
       </script>

   </body>
</html>