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 继承详解(四)
Jul 13 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
javascript数据类型验证方法
Dec 31 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP 第一节 php简介
2012/04/28 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
浅谈PHP封装CURL
2019/03/06 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
python模拟Django框架实例
2016/05/17 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
大学生个人自荐信
2014/02/24 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL