基于下拉1选择填充下拉2 [英] Populate Dropdown 2 based on Dropdown 1 selection

问题描述

我能够直接从数据库填充2下拉菜单。我的问题是，第二下拉值具有基于第一下拉选择要填充。由于我是新来的角，我不是能够找出答案，有人可以帮我了这一点。

I am able to populate 2 dropdowns directly from database. My problem is, the 2nd dropdown values has to be populated based on the 1st dropdown selection. Since i am new to Angular, i m not able to figure that out, can someone help me out with this.

<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服务器

Note: I am using Web API/Angular/Petapoco/SQL Server

推荐答案

您不应该需要2个控制器对于这一点，其实这可能是问题之一。
一旦他们在同一范围内，您可以轻松地绑在一起。使用 NG-变化第一个选项来触发获取的值来填充第二个选项的功能。

You shouldn't need 2 controllers for this, in fact that is probably one of the problems. Once they are within the same scope you can easily tie them together. Use ng-change on the first option to trigger a function that gets the values to populate the second option.

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

此外，您还可以使用 NG-节目与第二个选择的选项数组的长度，只显示第二已被填充，当它选择。

Also, you can use ng-show with the second select's options array length to only show the second select when it has been populated.

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

这篇关于基于下拉1选择填充下拉2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！