根据下拉列表 1 的选择填充下拉列表 2 [英] Populate Dropdown 2 based on Dropdown 1 selection
问题描述
我可以直接从数据库中填充 2 个下拉列表.我的问题是,必须根据第一个下拉选择填充第二个下拉值.由于我是 Angular 的新手,我无法弄清楚这一点,有人能帮我解决这个问题吗.
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/Angular/Petapoco/SQL Server
Note: I am using Web API/Angular/Petapoco/SQL Server
推荐答案
您不应该为此需要 2 个控制器,实际上这可能是问题之一.一旦它们在同一范围内,您就可以轻松地将它们联系在一起.在第一个选项上使用 ng-change
来触发一个函数,该函数获取填充第二个选项的值.
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-show
与第二个选择的选项数组长度一起使用,以仅在填充后显示第二个选择.
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屋!