Anglarjsは一つの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:' '}];
}
}
}
];
//AnglarJS$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;//
}
});
}]);
以上のAnglarjsは一つのselectの値に基づいてもう一つのselectの値を設定する方法は小編集で皆さんに提供した全部の内容を共有します。参考にしてほしいです。皆さんも応援してください。