根据下拉列表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个控制器,事实上这可能是其中一个问题.一旦它们在同一范围内,您就可以轻松地将它们连接在一起.使用ng-change第一个选项触发一个函数,该函数获取填充第二个选项的值.

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

此外,您可以使用ng-show第二个选项的选项数组长度仅在填充时显示第二个选择.

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