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;//加上灰背景
}

});

}]);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值