商品录入【SKU 商品信息】
5.1 需求分析

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

实现思路:实现思路:

(1)我们先定义一个初始的不带规格名称的集合,只有一条记录。
(2)循环用户选择的规格,根据规格名称和已选择的规格选项对原集合进行扩充,添加规格名称和值,新增的记录数与选择的规格选项个数相同

生成的顺序如下图:

5.1 前端代码
5.1.1 生成 SKU列表(深克隆)
(1)在 goodsController.js 实现创建 sku 列表的方法

//创建 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 = addColumn( $scope.entity.itemList,items[i].attributeName,items[i].attributeValue ); } } //添加列值addColumn=function(list,columnName,conlumnValues){
var newList=[];//新的集合 for(var i=0;i<list.length;i++){ var oldRow= list[i]; 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)在页面上添加表达式,进行测试

{{entity.itemList}}
显示效果如下:

Java之品优购课程讲义_day06(7)的更多相关文章

  1. 品优购(IDEA版)-第一天

    # 品优购(IDEA版)-第一天 品优购IDEA版应该是2019年的新项目.目前只有视频.资料其他都还是旧的. ## 1.学习目标 1:了解电商行业特点以及理解电商的模式 2:了解整体品优购的架构特点 ...

  2. 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查

    品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人 ...

  3. 品优购(IDEA版)-第二天

    品优购-第2天 学习目标 目标1:运用AngularJS前端框架的常用指令 目标2:完成品牌管理的列表功能 目标3:完成品牌管理的分页列表功能 目标4:完成品牌管理的增加功能 目标5:完成品牌管理的修 ...

  4. 品优购商城项目(六)CAS客户端与SpringSecurity集成

    cas单点登录旨在解决传统登录模式session在分布式项目中共享登录信息的问题. 本文cas服务器使用 4.0版本,仅供学习参考.把 cas.war 直接部署在tomcat即可,这里有个固定的用户名 ...

  5. 品优购商城项目(二)mybatis分页插件

    品优购商城项目第二天,使用mybatis分页插件实现分页.主要实现的是 SSM整合mybatis分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml versio ...

  6. 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框

    品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...

  7. 品优购商城项目(三)安全框架SpringSecurity

    品优购商城项目第三阶段 1.springSecurity的基本用法与shiro类似. 2.BCrypt加密算法比MD5更加智能和安全,能自动加盐再加密,生成的密码是60位比md5的32位更占空间(可以 ...

  8. 使用IDEA实现品优购项目搭建

    转发自 https://www.jianshu.com/p/4710a87b65fa 使用idea实现品优购项目搭建 1.使用idea实现品优购项目搭建 本篇文章只针对品优购第一天使用 IDEA 搭建 ...

  9. 品优购商城项目(一)mybatis逆向工程

    第一阶段 dubboX和mybatis逆向工程 用了四天时间才完成品优购项目前两天的任务. 1.其中主要遇到的坑就是zookeeper服务消费者无法调用的问题.造成这个问题的主要原因就是忽略了dubb ...

随机推荐

  1. JS的事件绑定、事件流模型

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...

  2. java算法之超级丑数

    问题描述: 写一个程序来找第 n 个超级丑数. 超级丑数的定义是正整数并且所有的质数因子都在所给定的一个大小为 k 的质数集合内. 比如给你 4 个质数的集合 [2, 7, 13, 19], 那么 [ ...

  3. Flask构建微电影(二)

    第三章.项目分析.搭建目录及模型设计 3.1.前后台项目目录分析 微电影网站 前台模块 后台模块 前台(home) 数据模型:models.py 表单处理:home/forms.py 模板目录:tem ...

  4. pycharm的安装及用法

    俗话说的好:"工欲善其事,必先利其器",程序员写代码,肯定不能在编译器里面写,这有一个全宇宙最好的python编译器,叫做pycharm ,他的优点呢,大家可以看一下: 优点:1, ...

  5. 简述spring的工作原理

    建议不要硬着头皮看spring代码,本身的代码800多m,就是不上班开始看也不知道什么时候看完.如果想学学ioc,控制反转这些建议看看jodd项目,比较简练,但是我仍然不建议过多的看这些框架的代码,因 ...

  6. java导入excel时处理日期格式(已验证ok)

    在Excel中的日期格式,比如2009-12-24将其转化为数字格式时变成了40171,在用java处理的时候,读取的也将是40171.如果使用POI处理Excel中的日期类型的单元格时,如果仅仅是判 ...

  7. Python 3.6 中文手册——前言

    1. 前言 如果你在电脑上做了很多工作,最终你会发现有一些任务你想要自动化.例如,你可能希望对大量的文本文件执行搜索和替换,或者以复杂的方式重命名并排列一堆照片文件.也许你想写一个小的自定义数据库,或 ...

  8. datePicker.js 应用

    var calendar2 = new datePicker();calendar.init({ 'trigger': '#datetime-picker-start', /*选择器,触发弹出插件*/ ...

  9. HTTP Strict Transport Security实战详解

    HTTP Strict Transport Security (通常简称为HSTS) 是一个安全功能,它告诉浏览器只能通过HTTPS访问当前资源, 禁止HTTP方式. 0×01. Freebuf百科: ...

  10. 使用nginx搭建https服务器

    http://www.cnblogs.com/tintin1926/archive/2012/07/12/2587311.html 最近在研究nginx,整好遇到一个需求就是希望服务器与客户端之间传输 ...