混合开发z

最新推荐文章于 2023-04-07 15:11:50 发布

cjavazhao

最新推荐文章于 2023-04-07 15:11:50 发布

阅读量130

点赞数 1

本文链接：https://blog.csdn.net/cjavazhao/article/details/80858966

版权

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

       <style type="text/css">

           table tr:nth-child(even){background-color: pink;}

       </style>


   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <center>


       <div>
           <input type="text" name="" id="" value="" placeholder="输入商品名" ng-model="mohu"/>
           <select name="" ng-model="order">
               <option value="gprice">按单价正序排序</option>
               <option value="-gprice">按单价倒序排序</option>
           </select>

           <input type="button" name="" id="" value="添加" ng-click="addshow=!addshow"/>
       </div>


       <div ng-show="addshow">
           <ul style="list-style: none;">
               <li>
                   商品名称:<input type="text" name="" id="" value="" ng-model="aname"/>
               </li>
               <li>
                   商品数量:<input type="text" name="" id="" value="" ng-model="anum"/>
               </li>
               <li>
                   商品单价:<input type="text" name="" id="" value="" ng-model="aprice"/>
               </li>

               <li>
                   <input type="button" name="" id="" value="添加" ng-click="add()"/>
               </li>
           </ul>

       </div>





       <table border="1" cellspacing="0" cellpadding="1">
           <tr>
               <th>商品名</th>
               <th>商品数量</th>
               <th>商品单价</th>
               <th>商品总价</th>
               <th>删除</th>
           </tr>

           <tr ng-repeat="x in shops|filter:mohu|orderBy:order">
               <td>{{x.gname}}</td>

               <td>
                   {{x.gnum}}
                   <input type="button" name="" id="" value="㊤" ng-click="jia(x.gid)"/>
                   <input type="button" name="" id="" value="㊦" ng-click="jian(x.gid)"/>
               </td>

               <td>{{x.gprice}}</td>
               <td>{{x.gprice*x.gnum}}</td>
               <td>
                   <input type="button" name="" id="" value="删除" ng-click="del(x.name)"/>
               </td>
           </tr>
       </table>
       <input type="button" name="" id="" value="清空购物车" ng-click="alldel()"/>


       <script type="text/javascript">

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

               $scope.addshow=false;

               $scope.shops=[{ "gid": 001, "gname": "手机","gnum": 3, "gprice": 1000, "gcount": 3000 },
               { "gid": 002, "gname": "电脑", "gnum": 3, "gprice": 2000, "gcount": 6000 },
               { "gid": 003, "gname": "电视", "gnum": 6, "gprice": 500, "gcount": 3000 }];



               //删除
               $scope.del=function(name){

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



               //加
           $scope.jia=function(id){
               for (var i = 0; i < $scope.shops.length; i++) {
                   if($scope.shops[i].gid==id){
                       $scope.shops[i].gnum++;
                   }
               }


           }


               //减
               $scope.jian=function(id){
               for (var i = 0; i < $scope.shops.length; i++) {

                   if($scope.shops[i].gnum<1){
                       $scope.shops.splice(i,1);break;
                   }

                   if($scope.shops[i].gid==id){
                       $scope.shops[i].gnum--;
                   }
               }


           }


               //清空列表
               $scope.alldel=function(){

                   if(confirm("确定吗")){

                       $scope.shops=[];
                   }
               }



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

                   var newshow={};
                   newshow.gname=$scope.aname;
                   newshow.gprice=$scope.aprice;
                   newshow.gnum=$scope.anum;
                   $scope.shops.push(newshow);

               }


           });



       </script>

       </center>
   </body>
</html>