Angularjs 根据一个select的值去设置另一个select的值方法
更新时间:2018年08月13日 15:11:09 作者:Franciswmf
今天小编就为大家分享一篇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;//加上灰背景 } }); }]);
以上这篇Angularjs 根据一个select的值去设置另一个select的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Angular 2父子组件数据传递之@Input和@Output详解 (上)
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。2017-07-07Angular.js中ng-if、ng-show和ng-hide的区别介绍
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别,需要的朋友可以参考借鉴,下面来一起看看吧。2017-01-01Angular.js中用ng-repeat-start实现自定义显示
大家都知道Angular.js可以用ng-repeat来显示列表数据,可是如果想要自定义显示数据列表的话ng-repeat就实现不了了,这个时候可以利用ng-repeat-start 和 ng-repeat-end来实现,下面通过本文来详细看看实现的方法吧。2016-10-10Angular.js初始化之ng-app的自动绑定与手动绑定详解
这篇文章主要给大家介绍了关于Angular.js初始化之ng-app的自动绑定与手动绑定的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07AngularJS基础 ng-selected 指令简单示例
本文主要介绍AngularJS ng-selected 指令,这里对ng-selected 指令的基础资料做了详细介绍,并附有示例代码,有需要的小伙伴可以参考下2016-08-08
最新评论