Angularjs 根據(jù)一個(gè)select的值去設(shè)置另一個(gè)select的值方法
更新時(shí)間:2018年08月13日 15:11:09 作者:Franciswmf
今天小編就為大家分享一篇Angularjs 根據(jù)一個(gè)select的值去設(shè)置另一個(gè)select的值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
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服務(wù)快捷的get請(qǐng)求
//alert('root=='+ACTIVITI.CONFIG.contextRoot);//對(duì)應(yīng)/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){
//處理錯(cuò)誤
//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) {
//選擇字段下拉列表,觸發(fā)關(guān)系符下拉
$scope.$on('to_myParentController_on_myColumnSelectModel_change',function(event,data){
$scope.$broadcast('to_myRelationController_on_myColumnSelectModel_change',data);
});
}]);
/*關(guān)系符*/
angular.module('activitiModeler').controller('myRelationController',['$rootScope', '$scope', '$http', '$timeout','$window', function ($rootScope, $scope, $http, $timeout,$window) {
$scope.myRelationDisableVar=true;
$scope.objDisableTrue=true;//加上灰背景
//接收事件-根據(jù)字段顯示下拉
$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 根據(jù)一個(gè)select的值去設(shè)置另一個(gè)select的值方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解
這篇文章給大家介紹了angularJS中ng-class指令的三種實(shí)現(xiàn)方式,其中包括通過數(shù)據(jù)的雙向綁定、通過對(duì)象數(shù)組和通過key/value這三種方式,有需要的朋友們可以參考學(xué)習(xí),下面來(lái)一起看看吧。2016-09-09
Angular 2.x學(xué)習(xí)教程之結(jié)構(gòu)指令詳解
結(jié)構(gòu)指令通過添加和刪除 DOM 元素來(lái)更改 DOM 布局。Angular 中兩個(gè)常見的結(jié)構(gòu)指令是 *ngIf 和 *ngFor,下面這篇文章主要給大家介紹了關(guān)于Angular 2.x結(jié)構(gòu)指令的相關(guān)資料,需要的朋友可以參考下。2017-05-05
Angularjs之ngModel中的值驗(yàn)證綁定方法
今天小編就為大家分享一篇Angularjs之ngModel中的值驗(yàn)證綁定方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
詳解AngularJs中$resource和restfu服務(wù)端數(shù)據(jù)交互
之前小編和大家分享過使用$http同服務(wù)器進(jìn)行通信,但是功能上比較簡(jiǎn)單,angularjs還提供了另外一個(gè)可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進(jìn)行數(shù)據(jù)交互。下面來(lái)一起看看吧。2016-09-09

