Populate Dropdown 2 на основе Dropdown 1 selection

Я могу заполнить 2 выпадающих меню непосредственно из базы данных. Моя проблема заключается в том, что 2-ые значения выпадающего списка должны быть заполнены на основе первого выпадающего списка. Поскольку я новичок в Angular, я не могу это понять, может кто-то помочь мне в этом.Populate Dropdown 2 на основе Dropdown 1 selection

<select id="OfficeId" name="OfficeId" ng-model="item.OfficeId" 
     ng-options="item.OfficeId as item.OfficeName for item in Offices"> 
    <option value="" selected>Select the Office</option> 
</select> 
<select id="OBJ" name="OBJ" ng-model="item.OfficeOBJId" 
     ng-options="item.OfficeOBJId as item.OBJId for item in Codes"> 
    <option value="" selected>Select OBJ Code</option> 
</select> 

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(); 
}

Примечание: Я использую Web API/Угловая/Petapoco/SQL Server

источник

2013-08-20 itssara

Добро пожаловать на ТАК! Я приказываю нам помочь вам лучше, я настоятельно рекомендую вам опубликовать любой соответствующий код, который у вас уже есть. – Brian

Вам не нужно 2 контроллера для этого, в том, что, вероятно, одна из проблем. Как только они находятся в пределах того же объема, вы можете легко связать их вместе. Используйте ng-change по первому варианту, чтобы вызвать функцию, которая получает значения для заполнения второй опции.

Пример Fiddle: http://jsfiddle.net/TheSharpieOne/Xku9z/

Кроме того, вы можете использовать ng-show с длиной второго выбора опции-х массива, чтобы показывать только второй выбор, когда она была заполнена.

Пример Fiddle: http://jsfiddle.net/TheSharpieOne/Xku9z/1/

источник

2013-08-21 03:09:07 TheSharpieOne

Отличные примеры. – spsaucier

Как я могу адаптировать ваш пример для заполнения городов после выбора состояния вызова http.get и использования этого формата Json: '$ scope.states = [{" id ": '1'," name ": 'Michigan'," cities ": [{'id': '1', 'name': 'Detroit'}, {'id': '2', 'name': 'Flint'}]}];' –

Вы собираетесь захотеть иметь список состояний, а затем список городов для каждого штата (в основном 50 списков городов, 1 список для каждого штата). После выбора состояния вы будете использовать это значение в вызове '$ http.get', чтобы получить список городов для этого состояния. Затем просто установите этот список в области. Используя один список состояний, который также содержит города, вам не нужно будет получать цитаты, так как вы уже имели бы их с состояниями. – TheSharpieOne

Делают это так:

<select id="OfficeId" name="OfficeId" ng-model="item.OfficeId" 
    ng-options="item.OfficeId as item.OfficeName for item in Offices" ng-change="updateObjects(item.OfficeId)"> 
<option value="" selected>Select the Office</option>

<select id="OBJ" name="OBJ" ng-model="item.OfficeOBJId" 
    ng-options="item.OfficeOBJId as item.OBJId for item in Codes"> 
<option value="" selected>Select OBJ Code</option>

С помощью JavaScript вы просто нужен только один контроллер, офис контроллера:

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' } } 
); 
});

источник

2016-07-15 12:28:29 henrybbosa

Я осуществил как следующий, Надеюсь, что это помогает :)

код

Контроллер

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']); 
}; 
} 
});

HTML код:

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<meta charset="utf-8"> 
<script src="angular.min.js"></script> 
<script src="app.js"></script> 
</head> 
<body ng-controller="ctrl"> 
<select ng-model="sel_attr" ng-init="sel_attr = options[0]" ng-options="attr['tab_label'] for attr in options"></select> 
<select ng-model="key_attr" ng-init="key_attr = key_options[0]" ng-options="attr['key_label'] for attr in key_options |filter: {table: sel_attr['table']}" ng-change="sel()"></select> 
</body> 
</html>

источник

2017-02-06 11:22:02

Populate Dropdown 2 на основе Dropdown 1 selection

ответ

Смежные вопросы