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


Posted in Javascript onAugust 13, 2018

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的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 #Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 #Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 #Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 #Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 #Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 #Javascript
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
You might like
PHP接收App端发送文件流的方法
2016/09/23 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
小程序实现图片预览裁剪插件
2019/11/22 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python中操作符重载用法分析
2016/04/29 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python读写zip压缩文件的方法
2018/08/29 Python
浅析Python函数式编程
2018/10/06 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
详解python的super()的作用和原理
2020/10/29 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
客户代表自我评价范例
2013/09/24 职场文书
《胡杨》教学反思
2014/02/16 职场文书
学习两会精神心得范文
2014/03/17 职场文书
个人典型事迹材料
2014/12/30 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android