Preencher o menu suspenso 2 com base na seleção do menu suspenso 1

Eu sou capaz de preencher 2 dropdowns diretamente do database. Meu problema é que os valores da segunda lista suspensa devem ser preenchidos com base na primeira seleção suspensa. Desde que eu sou novo em Angular, eu não sou capaz de descobrir isso, alguém pode me ajudar com isso.

 Select the Office   Select OBJ Code  myApp.factory('OfficeNames', function ($resource) { return $resource( 'api/Office/:id', { id: '@id' }, { update: { method: 'PUT' } } ); }); myApp.factory('OfficeObjCode', function ($resource) { return $resource( 'api/OfficeObj/:id', { id: '@id' }, { update: { method: 'PUT' } } ); }); function OfficeCtrl($scope, $location, OfficeNames) { $scope.Offices = OfficeNames.query(); } function OfficeObjCtrl($scope, $location, OfficeObjCode) { $scope.Codes = OfficeObjCode.query(); } 

Nota: Estou usando o Web API / Angular / Petapoco / SQL Server

Você não deve precisar de 2 controladores para isso, na verdade, esse é provavelmente um dos problemas. Uma vez que eles estejam no mesmo escopo, você pode facilmente juntá-los. Use ng-change na primeira opção para acionar uma function que obtenha os valores para preencher a segunda opção.

Exemplo Fiddle: http://jsfiddle.net/TheSharpieOne/Xku9z/

Além disso, você pode usar ng-show com o comprimento da matriz de opções do segundo select para mostrar apenas a segunda seleção quando tiver sido preenchida.

Exemplo Fiddle: http://jsfiddle.net/TheSharpieOne/Xku9z/1/

Eu implementei como seguir, Espero que ajude 🙂

Código controlador

 var app = angular.module("app",[]); app.controller("ctrl",function($scope){ $scope.key_options = [ {table:"Table_1",key:"age_flg",key_label:"Age"}, {table:"Table_1",key:"ethnicity_flg",key_label:"Ethnicity"}, {table:"Table_2",tab_label:"Table 2",key:"green_flg",key_label:"Green Flag"}, {table:"Table_2",tab_label:"Table 2",key:"life_flg",key_label:"Life Flag"} ]; $scope.options = [ {table:"Table_1",tab_label:"Table 1"}, {table:"Table_2",tab_label:"Table 2"} ]; $scope.sel = function(){ if($scope.key_attr){ console.log($scope.sel_attr['table']); console.log($scope.key_attr['key']); }; } }); 

Código HTML:

             

Faça isso deste modo:

  

  

Com o javascript você só precisa de um controlador, o controlador do escritório:

 angular.module('myApp',[]) .controller('OfficeCtrl', ['$scope','$location','OfficeNames','OfficeObjCode',function($scope, $location, OfficeNames,OfficeObjCode) { $scope.Offices=OfficeNames.query(); $scope.updateObjects =function(office_id) {`// take {{office_id}} to server to pick codes based //on that office id and // then assign them to $scope.codes..` $scope.Codes = 'what you came back with'; } }).factory('OfficeNames', function ($resource) { return $resource( 'api/Office/:id', { id: '@id' }, { update: { method: 'PUT' } } ); }).factory('OfficeObjCode', function ($resource) { return $resource( 'api/OfficeObj/:id', { id: '@id' }, { update: { method: 'PUT' } } ); });