您的位置：首页 > Web前端 > AngularJS

angular中的添加和批量删除

2017-12-07 14:35 204 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航