angular中的添加和批量删除

最新推荐文章于 2021-08-28 13:32:26 发布

忙着写BUG

最新推荐文章于 2021-08-28 13:32:26 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/MincingMachine/article/details/78741134

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="UTF-8"></script>
       <style>
           .tab{
               width: 500px;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       用户名:<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()" />
       <br />
       <input type="button" value="批量删除" ng-click="dele()" /><br />

       <table class="tab" border="1px" cellpadding="0px" cellspacing="0px">
           <tr><td><input type="checkbox" /></td><td>球类</td><td>单价</td><td>数量</td><td>总价</td><td>操作</td></tr>
           <tr ng-repeat="good in goods"><td><input type="checkbox" ng-click="xuanzhong($index)" /></td><td>{{good.gname}}</td><td>{{good.gprice}}</td><td>{{good.gcount}}</td><td>{{good.gprice*good.gcount}}</td><td>删除</td></tr>
       </table>
   </body>
   <script type="text/javascript">

       alert("aa")
       var mo = angular.module("myApp",[]);
       mo.controller("myCtrl",function($scope){
           $scope.goods=[{"flag":false,"gname":"篮球","gprice":10,"gcount":80}];
           $scope.add=function(){
               var good = {"flag":false,"gname":$scope.name,"gprice":$scope.price,"gcount":$scope.count};
               $scope.goods.push(good);
           }

           $scope.xuanzhong = function($index){
                   $scope.goods[$index].flag = !$scope.goods[$index].flag;
           }

           $scope.dele=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>
</html>