【郑州校区】Java之品优购课程讲义_day16（3） - 黑马程序员技术交流社区

购物车前端代码

实现购物车页面的展示与相关操作

可以实现购物车列表、数量的增减与移除以及合计数统计

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;





}





);





}





});

修改 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}}

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