|
购物车前端代码 3.1 需求分析实现购物车页面的展示与相关操作 可以实现购物车列表、数量的增减与移除以及合计数统计 3.1 购物车列表 3.1.1 前端服务层 pinyougou-cart-web 增加 cartService.js [AppleScript] 纯文本查看 复制代码 //购物车服务层app.service('cartService',function($http){
//购物车列表
this.findCartList=function(){
}
});3.1.1 file:///C:\Users\user\AppData\Local\Temp\ksohtml\wpsC1F6.tmp.pngfile:///C:\Users\user\AppData\Local\Temp\ksohtml\wpsC1F7.tmp.png前端控制层 pinyougou-cart-web 增加 cartController.js [AppleScript] 纯文本查看 复制代码 //购物车控制层app.controller('cartController',function($scope,cartService){
//查询购物车列表
$scope.findCartList=function(){ cartService.findCartList().success(
function(response){
$scope.cartList=response;
}
);
}
});3.1.1 页面 修改 cart.html 引入 js [AppleScript] 纯文本查看 复制代码 <script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="js/base.js"> </script>
<script type="text/javascript" src="js/service/cartService.js"> </script>
<script type="text/javascript" src="js/controller/cartController.js"> </script> 添加相关指令，指定控制器，调用初始化方法 [AppleScript] 纯文本查看 复制代码 <body ng-app="pinyougou" ng-controller="cartController" ng-init="findCartList()"> 循环显示购物车列表 [AppleScript] 纯文本查看 复制代码 <div class="cart-item-list" ng-repeat="cart in cartList">
<div class="cart-shop">
<input type="checkbox" name="" id="" value="" />
<span class="shopname self">{{cart.sellerName}}【商家 ID:{{cart.sellerId}}】
</span>
</div>
<div class="cart-body">
<div class="cart-list" ng-repeat="orderItem in cart.orderItemList">
<ul class="goods-list yui3-g">
<li class="yui3-u-1-24">
<input type="checkbox" name="" id="" value="" />
</li>
<li class="yui3-u-11-24">
<div class="good-item">
<div class="item-img"><img src="{{orderItem.picPath}}"
/></div>
<div class="item-msg">[AppleScript] 纯文本查看 复制代码 {{orderItem.title}}[/size][/font][/align][font=微软雅黑][size=3]
</div>
</div>
</li>
<li class="yui3-u-1-8"><span class="price">{{orderItem.price.toFixed(2)}}</span></li>
<li class="yui3-u-1-8">
<a href="javascript:void(0)" class="increment mins">-</a>
<input autocomplete="off" type="text" ng-model="orderItem.num" minnum="1" class="itxt" />
<a href="javascript:void(0)" class="increment plus">+</a>
</li>
<li class="yui3-u-1-8"><span class="sum">{{orderItem.totalFee.toFixed(2)}}</span></li>
<li class="yui3-u-1-8">
<a href="#none">删除</a><br />
<a href="#none">移到我的关注</a>
</li>
</ul>
</div>
</div>
</div> | 
收藏
淘帖
踩
