根据Dropdown 1选择填充Dropdown 2
根据Dropdown 1选择填充Dropdown 2
提问于 2013-08-21 05:09:29
我能够直接从数据库中填充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
回答 3
Stack Overflow用户
发布于 2013-08-21 11:09:08
你不应该为此需要两个控制器，事实上这可能是问题之一。一旦它们在同一范围内，您就可以很容易地将它们绑定在一起。在第一个选项上使用ng-change触发一个函数，该函数获取填充第二个选项的值。
示例小提琴：http://jsfiddle.net/TheSharpieOne/Xku9z/
此外，还可以将ng-show与第二个select的选项数组长度一起使用，以便在填充第二个select时只显示它。
示例小提琴：http://jsfiddle.net/TheSharpieOne/Xku9z/1/
Stack Overflow用户
发布于 2016-07-15 20:28:30
如下所示：
<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，您只需要一个控制器，即office控制器：
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' } }
);
});Stack Overflow用户
发布于 2017-02-06 19:22:03
我像下面这样实现了，希望它能有所帮助:)
控制器代码
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18345020
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号