黑马程序员技术交流社区

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

---

作者: 谷粒姐姐    时间: 2018-8-23 16:19
标题: 【郑州校区】Java之品优购课程讲义_day06（7）

商品录入【SKU 商品信息】

5.1 需求分析

基于上一步我们完成的规格选择，根据选择的规格录入商品的 SKU 信息，当用户选择相应的规格，下面的 SKU 列表就会自动生成，如下图：

实现思路：实现思路：

（1）我们先定义一个初始的不带规格名称的集合，只有一条记录。

（2）循环用户选择的规格，根据规格名称和已选择的规格选项对原集合进行扩充，添加规格名称和值，新增的记录数与选择的规格选项个数相同

生成的顺序如下图：

5.1 前端代码

5.1.1 生成 SKU列表(深克隆)

（1）在 goodsController.js 实现创建 sku 列表的方法

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

//创建 SKU 列表



$scope.createItemList=function(){



$scope.entity.itemList=[{spec:{},price:0,num:99999,status:'0',isDefault:'0'  }  ]

;//初始



var  items=    $scope.entity.goodsDesc.specificationItems;



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



$scope.entity.itemList  =

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

addColumn(  $scope.entity.itemList,items.attributeName,items.attributeValue  );



}



}



//添加列值addColumn=function(list,columnName,conlumnValues){

var  newList=[];//新的集合



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



var  oldRow=  list;



for(var  j=0;j<conlumnValues.length;j++){



var  newRow=  JSON.parse(  JSON.stringify(  oldRow  )    );//深克隆



newRow.spec[columnName]=conlumnValues[j]; newList.push(newRow);

}



}



return  newList;



}

（2）在更新规格属性后调用生成 SKU 列表的方法

（3）在页面上添加表达式，进行测试

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

{{entity.itemList}}

显示效果如下：

---

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

黑马程序员IT技术论坛 X3.2