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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
原生js实现随机点名功能
Nov 05 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
解决vue项目router切换太慢问题
Jul 19 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查找任何页面上的所有链接的方法
2013/12/03 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python实现猜数游戏
2020/03/27 Python
python如何进行矩阵运算
2020/06/05 Python
Java语言程序设计测试题判断题部分
2013/01/06 面试题
奥巴马演讲稿
2014/01/08 职场文书
服务之星事迹材料
2014/05/03 职场文书
给学校建议书范文
2014/05/13 职场文书
大学专科自荐信
2014/06/17 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
2016公司年会主持词
2015/07/01 职场文书