月考模拟购物车

最新推荐文章于 2022-06-16 09:12:59 发布

weixin_41922522

最新推荐文章于 2022-06-16 09:12:59 发布

阅读量144

点赞数

本文链接：https://blog.csdn.net/weixin_41922522/article/details/79746038

版权

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

       <style type="text/css">
           tbody tr:nth-child(even){/*偶数行*/
               background: yellow;

           }
           tbody tr:nth-child(odd){/*偶数行*/
               background: red;

           }
           .main{
               width: 60%;
               margin: 0 auto;
               text-align: center;
           }

           #search{
               float: right;
               background: yellow;
               border-radius: 10px;
               margin-bottom: 20px;
           }
           #stotalnum{
               float:left;
               background: green;
               border: 2px solid black;
               margin-top:15px;
               padding-left: 5px;
               padding-right: 5px;
           }
           #stotalprice{
               float:left;
               background: green;
               border: 2px solid black;
               margin-top:15px;
               padding-left: 5px;
               padding-right: 5px;
               margin-left: 20px;
           }
           #clear{
               float:left;
               background: yellow;
               border: 2px solid black;
               margin-top:15px;
               padding-left: 5px;
               padding-right: 5px;
               margin-left: 20px;
               border-radius: 10px;
           }
           thead{
               background: gray;
           }
           .btn1{
               background: gray;
               border: 0;
           }
       </style>

   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <div class="main">
       <h2>我的购物车详情</h2>
       <input type="text" name="" id="search" value="" placeholder="根据名称查询" ng-model="searchKey"/>


       <table border="1" cellspacing="0" cellpadding="0" width="100%">
           <thead>
               <tr>
               <th>商品编号 <input type="button" class="btn1" id="" value="{{falg}}" ng-click="orderById()"/></th>
               <th>商品名称</th>
               <th>商品数量</th>
               <th>商品单价</th>
               <th>价格小计 <input type="button" class="btn1" id="" value="{{falg1}}" ng-click="orderByCount()"/></th>
               <th>操作</th>
           </tr>

           </thead>
           <tbody>
               <tr ng-repeat="x in goods|filter:{gname:searchKey}|orderBy:orderKey">
                   <td>{{x.gid}}</td>
                   <td>{{x.gname}}</td>
                   <td><input type="number" name="" id="" value="{{x.gnum}}" ng-model="x.gnum" ng-click="reduce(x.gnum)" /></td>
                   <td>{{x.gprice}}</td>
                   <td>{{x.gcount=x.gnum*x.gprice}}</td>
                   <td><input type="button" id="" value="删除" ng-click="delGoods(x.gname)" /></td>
               </tr>

           </tbody>
       </table>

       <div>
           <span id="stotalnum">商品总数:{{getTotalNum()}}</span>
           <span id="stotalprice">商品总价:{{getTotalPrice()}}</span>
           <input type="button" name="" id="clear" value="清空购物车" ng-click="clearGoods()" />
       </div>
       </div>
       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){

               //初使化排序字段
               $scope.orderKey="";
               //
               var isFirst=true;

               //初使化标志
               $scope.falg="▲";
               $scope.falg1="▲";


               $scope.goods=[
               {gid:"001",gname:"手机",gnum:2,gprice:500,gcount:1000},
               {gid:"003",gname:"电脑",gnum:1,gprice:1500,gcount:1500},
               {gid:"002",gname:"手机",gnum:3,gprice:300,gcount:900}];

               //得到总数量
               $scope.getTotalNum=function(){
                   var total=0;
                   for (var i = 0; i < $scope.goods.length; i++) {
                       total=total+$scope.goods[i].gnum;
                   }
                   return total;
               }
               //得到商品总价格
               $scope.getTotalPrice=function(){
                   var totalPrice=0;
                   for (var i = 0; i < $scope.goods.length; i++) {
                       totalPrice+=$scope.goods[i].gprice*$scope.goods[i].gnum;
                   }
                   return totalPrice;
               }

               //清空购物车
               $scope.clearGoods=function(){
                   $scope.goods=[];
               }

               //删除数据
               $scope.delGoods=function(obj){
                   for (var i = 0; i < $scope.goods.length; i++) {
                       //查找名称
                       if($scope.goods[i].gname==obj){
                           $scope.goods.splice(i,1);//进行删除
                           break;
                       }
                   }
               }

               //根据id排序
               $scope.orderById=function(){
                   if(isFirst){
                       $scope.orderKey="gid";//升序
                       isFirst=false;
                       $scope.falg="▲";
                   }else{
                       $scope.orderKey="-gid";//倒序
                       isFirst=true;
                       $scope.falg="▼";
                   }

               }

               $scope.orderByCount=function(){
                   if(isFirst){
                       $scope.orderKey="gcount";
                       isFirst=false;
                       $scope.falg1="▲";
                   }else{
                       $scope.orderKey="-gcount";//倒序
                       isFirst=true;
                       $scope.falg1="▼";
                   }
               }

               //当商品数量小于1时，判断是否进行删除
               $scope.reduce=function(num){
                   if(num<1){
                       var c=confirm("确定删除吗？")
                       if(c){//为true时，代表删除
                           for (var i = 0; i < $scope.goods.length; i++) {
                               if($scope.goods[i].gnum==num){
                                   $scope.goods.splice(i,1);
                                   break;
                               }
                           }
                       }
                   }

               }


           })

       </script>


   </body>
</html>

weixin_41922522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
月考模拟购物车

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/jav
复制链接

扫一扫