`
Franciswmf
  • 浏览: 797313 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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的值方法

    今天,我们将讨论一个特定的话题:如何使用AngularJS来实现基于一个下拉菜单(select)的选择项来动态改变另一个下拉菜单的选项值。 首先,我们需要理解 AngularJS 中的数据绑定机制。通过使用 ng-model 指令,我们...

    angularjs ui-select2 多选下拉所需资源文件

    AngularJS是一款强大的前端JavaScript框架,而select2是一个流行的jQuery插件,它提供了美观且功能丰富的选择器组件,包括单选和多选下拉列表。 **一、AngularJS与ui-select2简介** AngularJS通过数据绑定和依赖...

    angularjs中select2使用 demo

    这个"angularjs中select2使用demo"应该是一个示例项目,展示了如何在AngularJS应用中集成和使用Select2。 首先,让我们了解AngularJS和Select2的基础知识。AngularJS是由Google维护的一个JavaScript框架,用于构建...

    angularjs自定义select搜索查找插件

    在本文中,我们将深入探讨如何使用AngularJS来创建一个自定义的Select组件,该组件具有选项自定义和搜索查找功能。AngularJS是一个流行的JavaScript框架,它提供了强大的数据绑定和依赖注入机制,使得构建动态Web...

    AngularJS入门教程之Select(选择框)详解

    AngularJS是一个流行的前端JavaScript框架,由Google团队开发,用以构建动态Web应用程序。其中,Select(选择框)控件是用户交互中常用的元素之一,它允许用户从一组选项中进行选择。AngularJS通过ng-options指令...

    angularjs的select使用及默认选中设置

    但在AngularJS中,我们可以使用`ng-selected`指令,它接受一个表达式,如果表达式的值为真,则该选项会被选中。在例子中,`ng-selected="1"`表示如果`1`为真,则选中该选项。由于`1`在JavaScript中始终为真,所以...

    AngularJS select设置默认值的实现方法

    `ng-model`指令绑定到了`ZNoteVo.type`,这意味着当用户在下拉列表中选择一个值时,`ZNoteVo.type`会同步更新为选定的`id`。 为了设置默认值,我们在控制器中初始化`ZNoteVo`对象,并为其`type`属性赋值。在这个...

    my-angularjs-select.rar

    在AngularJS中实现多选,我们需要使用`multiple`属性,并且将`ngModel`设置为一个数组,这样用户可以选择多个值。示例如下: ```html &lt;select multiple ng-model="selectedItems" ng-options="item.name for item ...

    angularjs下拉树控件

    当用户选择一个节点时,将其值设置为所选节点的标识符,并更新UI以反映当前的选择。 7. **事件绑定**:通过AngularJS的`ng-change`指令监听下拉框的改变事件,触发相应的处理函数,如更新模型、执行业务逻辑等。 ...

    实现两个select之间内容的互换实测通过

    `&lt;select&gt;`元素用于创建一个下拉列表,可以包含多个`&lt;option&gt;`元素来定义可选项。例如: ```html &lt;select id="select1"&gt; &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;Option 2 &lt;/select&gt; &lt;select...

    angularjs select2 多选下拉框

    angularjs select2 多选, 多选类似autocomplete 查询选择 适用于前端开发者,也适用于程序开发人员 多选可适用很多场景,比如多用户选择等等

    详解使用angularjs的ng-options时如何设置默认值(初始值)

    ng-options可以让我们更方便地将一个对象数组绑定到select元素上,并且可以设置显示对象的某个属性作为选项值和显示文本。但是,有时候在使用ng-options时,开发者可能会遇到一些问题,例如无法设置下拉列表的默认值...

    AngularJS实现的select二级联动下拉菜单功能示例

    3. 编写一个changeClassification函数,该函数会根据第一个select元素选中的值来动态地更新第二个select元素的数据源。 在本文实例中,我们定义了三个角色分类:软件开发、硬件开发和嵌入式开发。每个分类下又包含...

    angular-multi-select:AngularJS 的多选指令

    传入一个表达式来表示一个item的显示 列标题可定制 (6/3/14) 支持新属性“required-min”,它为最少数量的选定值添加表单验证。 (6/5/14) 如果提供了“标题”表达式,则评估它以显示每个项目的工具提示 (7/2/14) ...

    Angular.JS中select下拉框设置value的方法

    这样修改后,当用户选择一个选项时,`$scope.filter.detectUnitId`将保存相应的`id`值,而不是之前的索引。 尝试获取选中的值,例如通过`alert($scope.filter.detectUnitId);`,就可以得到用户选择的`detectUnit`的...

    angularjs 实现带查找筛选功能的select下拉框实例

    文章中提到的“angularjs 实现带查找筛选功能的select下拉框实例”,涵盖了在AngularJS框架内创建一个带有筛选功能的下拉列表的实现方法,这对于开发中需要改善用户体验的场景非常有用。在以往的select元素中,对于...

    品优购商城项目 技术选型: zookeeper dubbox分布式框架 AngularJS AngularJS-Select2等

    # pinyougou 品优购商城项目 技术选型: zookeeper dubbox分布式框架 AngularJS AngularJS-Select2 Spring Data Solr搜索框架 网页静态化技术Freemarker SpringBoot框架 CORS 跨域解决….zip项目工程资源经过严格...

Global site tag (gtag.js) - Google Analytics