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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
浅谈vue 单文件探索
2018/09/05 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python open()文件处理使用介绍
2014/11/30 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
史上最全面的Java面试题汇总!
2015/02/03 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
数学专业推荐信范文
2013/11/21 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
青春雷锋观后感
2015/06/10 职场文书
校运会班级霸气口号
2015/12/24 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS