黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day12（8） [打印本页]

作者: 谷粒姐姐 时间: 2018-10-8 14:18
标题: 【郑州校区】Java之品优购课程讲义_day12（8）

4.2 显示 SKU 标题和价格

4.2.1 加载默认 SKU 信息

修改 itemController.js

[AppleScript] 纯文本查看 复制代码

//加载默认 SKU



$scope.loadSku=function(){

$scope.sku=skuList[0];



$scope.specificationItems= JSON.parse(JSON.stringify($scope.sku.spec)) ;



}

修改模板 item.ftl

[AppleScript] 纯文本查看 复制代码

<body  ng-app="pinyougou"  ng-controller="itemController"  ng-init="num=1;loadSku()">

修改模板，显示标题

[AppleScript] 纯文本查看 复制代码

<div  class="sku-name"><h4>{{sku.title}}</h4></div>

显示价格

[AppleScript] 纯文本查看 复制代码

<div  class="summary-wrap">



<div  class="fl  title"><i>价        格</i></div>



<div  class="fl  price"><i>¥</i>  <em>{{sku.price}}</em>  <span>降价通知</span></div>



</div>

4.2.1 选择规格更新 SKU

修改 itemController.js , 编写匹配对象的方法

[AppleScript] 纯文本查看 复制代码

//匹配两个对象

matchObject=function(map1,map2){ for(var k in map1){

if(map1[k]!=map2[k]){ return false;

}

}

for(var k in map2){

if(map2[k]!=map1[k]){ return false;

}

}

return true;

}

编写方法，在 SKU 列表中查询当前用户选择的 SKU

[AppleScript] 纯文本查看 复制代码

//查询 SKU

searchSku=function(){

for(var i=0;i<skuList.length;i++ ){

if( matchObject(skuList.spec ,$scope.specificationItems ) ){

$scope.sku=skuList; return ;

}

}

$scope.sku={id:0,title:'--------',price:0};//如果没有匹配的

}

在用户选择规格后触发读取方法

[AppleScript] 纯文本查看 复制代码
//用户选择规格

$scope.selectSpecification=function(name,value){

$scope.specificationItems[name]=value;

searchSku();//读取 sku

}

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2