angularjs - 根据下拉菜单 1 的选择填充下拉菜单 2

Question

我可以直接从数据库填充 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

Answer 1

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

fiddle 示例:http://jsfiddle.net/TheSharpieOne/Xku9z/

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

fiddle 示例:http://jsfiddle.net/TheSharpieOne/Xku9z/1/