购物车.html

最新推荐文章于 2022-03-12 17:56:42 发布

zj462136

最新推荐文章于 2022-03-12 17:56:42 发布

阅读量1.8k

点赞数

本文链接：https://blog.youkuaiyun.com/zj462136/article/details/78576390

版权

本文介绍了一个使用Angular框架实现的购物车应用案例。该应用通过Ionic框架进行UI布局，并利用Angular的模块化特性实现了商品筛选、添加到购物车及结算等功能。文章详细展示了如何通过$http服务获取商品数据、如何使用$filter过滤器按类型筛选商品、如何实现商品加入购物车及购物车中商品数量和总价的计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="lib/css/ionic.css"/>
       <script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           angular.module("jun",["ionic"])
           .config(function($stateProvider){
               $stateProvider
               .state("1",{
                   url:"/index",
                   templateUrl:"index.html"
               })
               .state("2",{
                   url:"/jiesuan",
                   templateUrl:"jiesuan.html"
               })
           })
           .controller("dd",function($scope,$http,$filter,$state){
               $state.go("1")
               var datagoods;
               $scope.count=0;
               $scope.sumprice=0;
               $scope.goodCart=[];
               $http.get("datas.json").success(function(resp){
                   $scope.goods=resp;
                   datasgoods=resp;
               })
               $scope.selData=function(t){
                   $f=$filter("filter");
                   $scope.goods=$f(datasgoods,{
                       "type":t
                   })
               }
               $scope.goCart=function(i){
                   var good=$scope.goods[i];
                   $scope.sumprice=$scope.sumprice+good.price;
                   $scope.count=$scope.count+1;
                   addCart(good);
               }
               addCart=function(good){
                   var b=false;
                   for(var i=0;i<$scope.goodCart.length;i++){
                       if($scope.goodCart[i].good==good){
                           $scope.goodCart[i].num=$scope.goodCart[i].num+1;
                           b=true;
                           return;
                       }
                   }
                   if(b==false){
                       $scope.goodCart.push({
                           "good":good,
                           "num":1
                       })
                   }
               }
               $scope.del=function(index){
                   var gcart=$scope.goodCart[index];
                   gcart.num=gcart.num-1;
                   if(gcart.num==0){
                       $scope.goodCart.splice(index,1);
                   }
                   $scope.count=$scope.count-1;
                   $scope.sumprice=$scope.sumprice-gcart.good.price;
               }
           })
       </script>
   </head>
   <body ng-app="jun" ng-controller="dd">
       <ion-header-bar align-title="right" class="bar-positive">
           <a class="button" href="#/index">
               运动商城
           </a>
           <h1 class="title">
               您的购物车：{{count}} {{sumprice|currency:"RMB ￥"}}
           </h1>
           <div class="buttons">
               <a class="button" href="#/jiesuan">
                   结算
               </a>
           </div>
       </ion-header-bar>
       <br /><br /><br />
       <div ui-view></div>
   </body>

</html>

---------------------------------------------_-------------------------------------------------------------------------------------------------

index

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div style="float: left;">
           <ul style="margin-left: 15px;">
               <li>
                   <button class="button button-assertive" ng-click="selData('')" style="width: 100px;">首页</button>
               </li>
               <li>
                   <button class="button button-assertive" ng-click="selData('女装')" style="width: 100px;">女装</button>
               </li>
               <li>
                   <button class="button button-assertive" ng-click="selData('男装')" style="width: 100px;">男装</button>
               </li>
               <li>
                   <button class="button button-assertive" ng-click="selData('饰品')" style="width: 100px;">饰品</button>
               </li>
               <li>
                   <button class="button button-assertive" ng-click="selData('鞋包')" style="width: 100px;">鞋包</button>
               </li>
           </ul>
       </div>

       <div style="width: 1000px; margin-left: 200px;">
           <ul class="list">
               <li class="item" ng-repeat="g in goods">
                   <h3 style="float: right;">{{g.proname}}</h3>
                   <img src="img/y.jpg"/>
                   <button class="button button-block" ng-click="goCart($index)" style="width: 100px; float: right;">
                       加入购物车
                   </button>
                   <span style="float: right; margin-right: 100px; margin-top: 30px;">
                       {{g.price|currency:"RMB ￥"}}
                   </span>
               </li>
           </ul>
       </div>
   </body>
</html>

_---------------------------------------------------------------------------------------------------------------------------------------------------------------

jiesuan

--------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div class="alert alert-warning" ng-show="goodCart.length==0">
           您的购物车是空的！！！！
           <a href="#index" class="alert-link">继续购物</a>
       </div>
       <table border="0px" cellspacing="0px" cellpadding="0px" ng-hide="goodCart.length==0">
           <tr>
               <th>
                   数量
               </th>
               <th>
                   商品名称
               </th>
               <th>
                   单价
               </th>
               <th>
                   小计
               </th>
           </tr>
           <tr ng-repeat="c in goodCart">
               <td>
                   {{c.num}}
               </td>
               <td>
                   {{c.good.proname}}
               </td>
               <td>
                   {{c.good.price}}
               </td>
               <td>
                   {{c.goode.price * c.num|currency:"RMB ￥"}}
                   <button class="button-small" ng-click="del($index)">
                       删除
                   </button>
               </td>
           </tr>
       </table>
   </body>
</html>