项目笔记Learn06(下拉框实现级联和checkbox)-CSDN博客

本文链接：https://blog.csdn.net/shuaigeyimei1/article/details/96472290

1.下拉框

1.controller.js中

//读取一级分类
$scope.selectItemCat1List=function(){
      itemCatService.findByParentId(0).success(
    		 function(response){
    			 $scope.itemCat1List=response; 
    		 }
      );
}

2.页面加载调用该方法

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController" ng-init="selectItemCat1List()">

3.一级分类下拉选择框

<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List">
	<option  ng-repeat=”item in itemCat1List ” value=”{{item.id}}”>{{item.name}}</option>
</select>

此时一级下拉框绑定了entity.goods.category1Id变量，二级下拉框可以根据这个变量来实现：
1.Controller.js中：

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

$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。
newValue, oldValue代表变量修改之前的值和修改之后的值
2.二级分类下拉框

<select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select>

同理可以实现多级下拉框联动效果。

2.checkbox

Controller.js中：

$scope.entity={ goodsDesc:{itemImages:[],specificationItems:[]}  };

$scope.updateSpecAttribute=function($event,name,value){
	var object= $scope.searchObjectByKey($scope.entity.goodsDesc.specificationItems ,'attributeName', name);		
		if(object!=null){	
			if($event.target.checked ){
				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{				
				$scope.entity.goodsDesc.specificationItems.push({"attributeName":name,"attributeValue":[value]});
		}		
	}

2.html中：

<div ng-repeat="pojo in specList">
		<div class="col-md-2 title">{{pojo.text}}</div>
		<div class="col-md-10 data">
		<span ng-repeat="option in pojo.options">
		<input  type="checkbox" ng-click="updateSpecAttribute($event,pojo.text,option.optionName)">{{option.optionName}}					                            				                            	     </span> 																         </div>
</div>

3.页面的启用
1.html添加复选框

<div class="row data-type">
	  <div class="col-md-2 title">是否启用规格</div>
			<div class="col-md-10 data">
			<input type="checkbox"  ng-model="entity.goods.isEnableSpec" ng-true-value="1" ng-false-value="0">
			// 此时复选框的勾选会传值给变量
			</div>
 </div>

2.用if指令控制规格面板与SKU列表的显示与隐藏

//根据变量的值判断是否启用
<div ng-if="entity.goods.isEnableSpec==1">
......SKU表格部分
</div>