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寸"]}
]