购买 - 代码天地

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

       <div>
           <input type="text" name="" id="" value="" placeholder="输入关键字" ng-model="mohu"/>

           <input type="button" name="" id="" value="批量删除" ng-click="plsc()"/>
       </div>

       <table border="1" cellspacing="0" cellpadding="1">
           <tr>
               <th><input type="checkbox" name="" id="" value="" ng-model="cb"/></th>
               <th>商品名称</th>
               <th>
                   商品价格
                   <input type="button" name="" id="" value="㊤" ng-click="gao()"/>
                   <input type="button" name="" id="" value="㊦" ng-click="di()"/>
               </th>
               <th>
                   库存
               <input type="button" name="" id="" value="㊤" ng-click="gao()"/>
                   <input type="button" name="" id="" value="㊦" ng-click="di()"/>
               </th>
               <th>
                   月销量
               <input type="button" name="" id="" value="㊤" ng-click="gao()"/>
                   <input type="button" name="" id="" value="㊦" ng-click="di()"/>
               </th>
               <th>购买</th>

           </tr>

           <tr ng-repeat="x in shops|filter:mohu|orderBy:pai">
               <td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="cb"/></td>
               <td>{{x.name}}</td>
               <td>{{x.price|currency:"¥"}}</td>
               <td>{{x.num}}</td>
               <td>{{x.xiao}}</td>
               <td><input type="button" name="" id="" value="购买" ng-click="goumai(x.name)"/></td>

           </tr>
       </table>


       <script type="text/javascript">

           var app = angular.module("myapp",[]);
           app.controller("myctrl",function($scope){

               $scope.shops=[{name:"天梭",price:4300,num:300,xiao:1800},
               {name:"浪琴",price:3300,num:100,xiao:100},
               {name:"梅花",price:2800,num:280,xiao:1000},
               {name:"江诗丹顿",price:4500,num:700,xiao:7800},
               {name:"阿玛尼",price:9000,num:100,xiao:800}];



               //批量删除
               $scope.plsc=function(){

                   var cbs = $("input:checked");

                   if(cbs.length==0){
                       alert("请选中数据在删除");

                   }else{

                       var a = confirm("确定删除吗");

                       if(a){

                           cbs.each(function(){

                               for (var i = 0; i < $scope.shops.length; i++) {
                                   if($scope.shops[i].name==$(this).val()){
                                       $scope.shops.splice(i,1);
                                       break;
                                   }
                               }

                           })
                       }

                   }

               }

               //商品价格高低排序
               $scope.gao=function(){

                   $scope.pai="price";
               }
               $scope.di=function(){

                   $scope.pai="-price";
               }


               //商品库存排序
               $scope.gao=function(){

                   $scope.pai="num";
               }
               $scope.di=function(){

                   $scope.pai="-num";
               }


               //商品销量排序
               $scope.gao=function(){

                   $scope.pai="xiao";
               }
               $scope.di=function(){

                   $scope.pai="-xiao";
               }


               //购买
               $scope.goumai=function(name){


                       for (var i = 0; i < $scope.shops.length; i++) {
                                if(   $scope.shops[i].name==name){
                                       $scope.shops[i].num--;
                                       $scope.shops[i].xiao++;
                                       break;
                                }
                       }
               }



           })




       </script>


   </body>
</html>

购买

猜你喜欢