场景:
在进入修改商品页面的时候,前端获取从后端返回的数据,并将这些数据展示在修改商品的页面上,在使用AngularJS的情况下如何判断并勾选?也即:什么时候勾选复选框?
(1)取决于数据库中的某张表的某个字段,例如在数据库中存储的是这样的:
[{"attributeName":"网络","attributeValue":["移动3G","移动4G"]},{"attributeName":"机身内存","attributeValue":["16G","32G"]}]
(2)首先将该值取出来,然后检查当前所循环的节点,将两个值都传递过去(例如判断“移动3G”,需要传“移动3G”和“网络”),如果查询到了则勾选,反之则无。
(3)先检查attributeName是否匹配,如果不匹配则直接返回false即可
封装通用匹配方法:
//通用查询方法:在list集合中根据某个key的值查询对象
//list:待查询集合,key:待查询属性的字符串,待匹配的值
$scope.searchObjectByKey=function(list,key,keyValue){
for(var i=0;i<list;i++){
//list[i]就是查询的每一个元素
//将传过来的值进行匹配,固定的key可以写list[i]['attributeName']
if(list[i][key]==keyValue){
//返回的是一个对象
return list[i];
}
}
return null;
}
实体查询方法:
//查询实体
$scope.findOne=function(id){
//会获取页面上所有的参数,会将所有参数转换成数组。获取某一个值方式:
var id = $location.serach()['id'];
if(id = null){
return ;
}
goodsService.findOne(id).success(
function(response){
$scope.entity= response;
//富文本编辑器
editor.html($scope.entity.goodsDesc.introduction);
//商品图片
$scope.entiy.goodsDesc.itemImages = JSON.parse($scope.entiy.goodsDesc.itemImages);
//扩展属性
$scope.entity.goodsDesc.customAttributeItems = JSON.parse($scope.entity.goodsDesc.customAttributeItems);
//规格选择
$scope.entity.goodsDesc.specificationItems = JSON.parse($scope.entity.goodsDesc.specificationItems);
}
);
}
使用AngularJS的Angular-checked方法将匹配的值自动勾选:
//自动勾选
$scope.checkAttributeValue=function(specName,optionName){
var items = $scope.entity.goodsDesc.specificationItems;
//需要接收3个参数,第一个为list集合(哪里来?),查询时转换
var obj = $scope.searchObjectByKey(items, 'attributeName', specName);
if(obj != null){
//如果能查询到则勾选
if(obj.attributeValue.indexOf(optionName)>=0){
return true;
}else{
return false;
}
}else{
//obj空
return false;
}
}