根据 Dropdown 1 选择填充 Dropdown 2答案

【问题标题】：Populate Dropdown 2 based on Dropdown 1 selection根据 Dropdown 1 选择填充 Dropdown 2
【发布时间】：2017-08-03 23:43:38
【问题描述】：

我可以直接从数据库中填充 2 个下拉列表。我的问题是，必须根据第一个下拉选择填充第二个下拉值。由于我是 Angular 的新手，所以我无法弄清楚，有人可以帮我解决这个问题。

<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/Angular/Petapoco/SQL Server

【问题讨论】：

欢迎来到 SO！我为了帮助我们更好地帮助您，我强烈建议您发布您已有的任何相关代码。

标签： angularjs

【解决方案1】：

您不应该为此需要 2 个控制器，事实上这可能是问题之一。一旦它们在同一范围内，您就可以轻松地将它们绑定在一起。在第一个选项上使用ng-change 来触发一个函数，该函数获取值以填充第二个选项。

小提琴示例：http://jsfiddle.net/TheSharpieOne/Xku9z/

此外，您可以将ng-show 与第二个选择的选项数组长度一起使用，以便仅在填充第二个选择时显示它。

小提琴示例：http://jsfiddle.net/TheSharpieOne/Xku9z/1/

【讨论】：

在选择调用 http.get 的州并使用此 Json 格式后，我如何调整您的示例以填充城市：$scope.states=[{"id":'1',"name":'Michigan',"cities":[{'id':'1','name':'Detroit'},{'id':'2','name':'Flint'}]}];
您将需要一个州列表，然后是每个州的城市列表（基本上是 50 个城市列表，每个州 1 个列表）。选择州后，您将在$http.get 调用中使用该值来获取该州的城市列表。然后只需将该列表设置在范围内。使用一个包含城市的州列表，您不需要获取城市，因为您已经拥有州。
不要使用ng-if。正如作者所说，在第二个下拉菜单中使用ng-show。

【解决方案2】：

我实现如下，希望对你有帮助:)

控制器代码

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>

【讨论】：

【解决方案3】：

这样做：

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

【讨论】：