JS生成SKU( 深克隆 )

1. angularJs指令及函数

ng-options

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

<!-- item.id 作为value item.name作为文本显示 -->
<!-- <option value="">xxx</option> -->
<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select>

$watch

$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。

//读取二级分类
//newValue 为监控的变量变化后的值 oldValue为监控的变量变化前的值
$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) {          
    	//根据选择的值，查询二级分类
    	itemCatService.findByParentId(newValue).success(
    		function(response){
    			$scope.itemCat2List=response; 	    			
    		}
    	);    	
}); 

2. js逻辑代码

[{“attributeName”:”规格名称”,”attributeValue”:[“规格选项1”,“规格选项2”… ] } , … ]

需求 : 查询json数组中是否有包含某个key value的对象

//从集合中按照key查询对象
//list [{“attributeName”:”规格名称”,”attributeValue”:[“规格选项1”,“规格选项2”.... ]  } , ....  ]
//key attributeName
//keyValue "规格名称"
$scope.searchObjectByKey=function(list,key,keyValue){
    //首先遍历数组,得到每一个对象
    for(var i=0;i<list.length;i++){
        //判断对象中的key对应的value是否是传入keyValue
        if(list[i][key]==keyValue){
            //如果是 就返回这个对象
            return list[i];
        }			
    }		
    return null;
}

需求 : 更新json数组的某个对象的属性

[ {“attributeName”:“网络”,“attributeValue”:[“移动4G”,“联通4G”,“电信4G”]},
{“attributeName”:“机身内存”,“attributeValue”:[“32G”,“128G”]},
{“attributeName”:“手机屏幕尺寸”,“attributeValue”:[“4.5寸”]}]

//entity对象中 goodsDesc是json对象,这个对象有json数组的属性specificationItems
$scope.entity={goodsDesc:{specificationItems:[]}};
//点击多选框时,触发这个方法
//$event angularJs提供的指令,获取当前dom对象
//name 网络/机身内存/手机屏幕尺寸...
//value 移动4G/32G/4.5寸...
$scope.updateSpecAttribute=function($event,name,value){
    //判断specificationItems是否已经存储了attributeName为name的对象
    var object= $scope.searchObjectByKey(
        $scope.entity.goodsDesc.specificationItems ,'attributeName', name);		
    //如果存在
    if(object!=null){
        //判断多选框是选中还是取消选中
        if($event.target.checked ){
            //选中则在这个对象的attributeValue这个属性中添加元素
            object.attributeValue.push(value);		
        }else{//取消勾选				
            object.attributeValue.splice( object.attributeValue.indexOf(value ) ,1);//移除选项
            //如果选项都取消了，将此条记录移除
            if(object.attributeValue.length==0){
                $scope.entity.goodsDesc.specificationItems.splice(
                    $scope.entity.goodsDesc.specificationItems.indexOf(object),1);
            }				
        }
    }else{
        //如果不存在 添加一个新的对象到specificationItems中
        $scope.entity.goodsDesc.specificationItems.push(
            {"attributeName":name,"attributeValue":[value]});
    }		
}

3.js生成SKU列表(深克隆)

生成数据和勾选哪个选项无关，每次勾选都根据勾选结果重新生成列表数据

需求 ：根据勾选结果去生成列表

[ {“attributeName”:“网络”,“attributeValue”:[“移动4G”,“联通4G”,“电信4G”]},
{“attributeName”:“机身内存”,“attributeValue”:[“32G”,“128G”]},
{“attributeName”:“手机屏幕尺寸”,“attributeValue”:[“4.5寸”]}]

上一次生成的列表和本一次规格生成新的列表

for(循环规格){

新的列表=生成（上次一次的列表，本一次的规格）

}

//深克隆
//定义一个jsona
var jsona = {price:0,num:99999,status:1,isDefault:0}
//把jsona转化为json字符串
JSON.stringify(jsona)//可以得到json字符串  '{price:0,num:99999,status:1,isDefault:0}'

//把json字符串转为json对象赋值给jsonb
var jsonb = JSON.parse(JSON.stringify(jsona))

//创建SKU列表
$scope.createItemList=function(){
    //每次勾选多选框都触发这个方法,itemList都重新初始化
    $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++){
        //循环得到每一个item对象
        //{"attributeName":"网络","attributeValue":["移动4G","联通4G","电信4G"]}
        $scope.entity.itemList = addColumn( $scope.entity.itemList,items[i].attributeName,items[i].attributeValue );    
    }	
}
//添加列值 
//list $scope.entity.itemList
//columnName  网络
//columnValues ["移动4G","联通4G","电信4G"]
addColumn=function(list,columnName,columnValues){
    var newList=[];//新的集合
    for(var i=0;i<list.length;i++){
        //list中的每一个对象,每一条SKU
        var oldRow= list[i];
        //给当前SKU添加规格
        for(var j=0;j<columnValues.length;j++){
            var newRow= JSON.parse( JSON.stringify( oldRow )  );//深克隆
            newRow.spec[columnName]=columnValues[j];
            newList.push(newRow);
        }    		 
    } 		
    return newList;
}

最终生成的json数据

"itemList":
[
	{"spec":{"网络":"移动4G","机身内存":"32G","手机屏幕尺寸":"4.5寸"},
	 "price":"4599",
	 "num":"888",
	 "status":"1",
	 "isDefault":"0"},
    {"spec":{"网络":"移动4G","机身内存":"128G","手机屏幕尺寸":"4.5寸"},
			 "price":"5399",
			 "num":"888",
			 "status":"1",
			 "isDefault":"1"},...
 ]
  
    
"items":
[   
    {"attributeName":"网络","attributeValue":["移动4G","联通4G","电信4G"]},
    {"attributeName":"机身内存","attributeValue":["32G","128G"]},
    {"attributeName":"手机屏幕尺寸","attributeValue":["4.5寸"]}
]