Angular-checked方法使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26975307/article/details/84340049

场景：

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