Angularjs 根据 一个select的值去设置另一个select的值

html:
<div ng-controller="mySelectController">
<select ng-model="myField" ng-options="Field.label for Field in names" 
ng-change="mySelectControllerChange()">
<option value=''>{{'SELECT.LABEL.VXI.CUSTOM.SELECT' | translate}}</option>
</select>
</div>
 <div ng-controller="myRelationController">
<select ng-model="myRelation" ng-options="relation.name for relation in relationList" >
<option value=''>{{'SELECT.LABEL.VXI.CUSTOM.SELECT' | translate}}</option>
</select>
</div>

js:
var mySelectController=['$scope', '$http', '$rootScope', function($scope, $http, $rootScope) {
	
	//$http的method可以是get/delete/head/jsonp/post/put
	//$http服务快捷的get请求
	//alert('root=='+ACTIVITI.CONFIG.contextRoot);//对应/activiti-explorer/service
	$http({
		method:'PUT',
		url:ACTIVITI.CONFIG.contextRoot +'/getFormFieldList'
	})
	.success(
			function(data,status,headers,config){
				//成功加载
		        $scope.names=data;
	})
	.error(
			
			function(data,status,headers,config){
				//处理错误
				//do nothing
			}
	);
	//change
	$scope.mySelectControllerChange=function(){
		var app=angular.module('activitiModeler',[]);
		if($scope.myField.optionGroupId!=null && $scope.myField.optionGroupId!=''){
			//有optionGroup
			console.log('if');
			$rootScope.relationList = [{id:0,name:'等于'},{id:1,name:'不等于'},{id:2,name:'包含'}];
		}else{
			//没有optionGroup
			console.log('else');
			$rootScope.relationList = [{id:0,name:'等于'},{id:3,name:'大于'},{id:4,name:'小于'},{id:5,name:'小于等于'},{id:6,name:'大于等于'},{id:2,name:'包含'}];
		}
		
	}

}
];


//AngularJS $emit $broadcast $on
//change
	$scope.mySelectControllerChange=function(){
		var data=null;
		if(null==$scope.myColumnSelectModel){
			data={
					pa:'',
					pb:''
			};
		}else{
			data={
					pa:$scope.myColumnSelectModel,
					pb:$scope.myColumnSelectModel.optionGroupId
			};
		}
		$scope.$emit('to_myParentController_on_myColumnSelectModel_change',data);
	}

/*myParentController*/
angular.module('activitiModeler').controller('myParentController',['$rootScope', '$scope', '$http', '$timeout','$window', function ($rootScope, $scope, $http, $timeout,$window) {
	//选择字段下拉列表,触发关系符下拉
	$scope.$on('to_myParentController_on_myColumnSelectModel_change',function(event,data){
		$scope.$broadcast('to_myRelationController_on_myColumnSelectModel_change',data);
	});

    
}]);

/*关系符*/
angular.module('activitiModeler').controller('myRelationController',['$rootScope', '$scope', '$http', '$timeout','$window', function ($rootScope, $scope, $http, $timeout,$window) {
	$scope.myRelationDisableVar=true;
	$scope.objDisableTrue=true;//加上灰背景
	//接收事件-根据字段显示下拉
	$scope.$on('to_myRelationController_on_myColumnSelectModel_change',function(event,data){
		if(data.pa!=''){
			$scope.myRelationDisableVar=false;
			$scope.objDisableTrue=false;//去掉灰背景
			if(data.pb!=null && data.pb!=''){
				//有optionGroup
				$scope.relationList = [{id:0,name:'等于'},{id:1,name:'不等于'},{id:2,name:'包含'}];
			}else{
				//没有optionGroup
				$scope.relationList = [{id:0,name:'等于'},{id:3,name:'大于'},{id:4,name:'小于'},{id:5,name:'小于等于'},{id:6,name:'大于等于'},{id:2,name:'包含'}];
			}
		}else{
			$scope.relationList=null;
			$scope.myRelationDisableVar=true;
			$scope.objDisableTrue=true;//加上灰背景
		}
		
	});

}]);

猜你喜欢

转载自franciswmf.iteye.com/blog/2278179