Angular-checked方法使用
场景:
在进入修改商品页面的时候,前端获取从后端返回的数据,并将这些数据展示在修改商品的页面上,在使用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; } }