Javascript 在运行时选择下拉列表时动态填充下拉选项
我有一个JSON对象,包含下拉列表的名称,看起来像这样-Javascript 在运行时选择下拉列表时动态填充下拉选项,javascript,angularjs,json,angularjs-ng-repeat,html-select,Javascript,Angularjs,Json,Angularjs Ng Repeat,Html Select,我有一个JSON对象,包含下拉列表的名称,看起来像这样- $scope.obj = { "dp1" :{}, "dp2" :{} } $scope.getData = function(category, type) { var params = { "dp1" : category, "dp1__type": type}; PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamS
$scope.obj = {
"dp1" :{},
"dp2" :{}
}
$scope.getData = function(category, type) {
var params = { "dp1" : category, "dp1__type": type};
PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamSerializer(params)).then(function(response) {
$scope.obj.dp1= response;
});
}
对象dp1
和dp2
对应于相应的下拉列表。这些对象将通过下拉列表来填充其选项标记。
接下来我有一个REST调用函数,如下所示-
$scope.obj = {
"dp1" :{},
"dp2" :{}
}
$scope.getData = function(category, type) {
var params = { "dp1" : category, "dp1__type": type};
PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamSerializer(params)).then(function(response) {
$scope.obj.dp1= response;
});
}
我能够将响应分配给$scope.obj.dp1
响应对象如下所示-
{ "id" : 1, "name" : "john" }
最后,我的下拉列表如下所示-
<select id="d1" ng-model="d1">
<option ng-repeat="opt in obj.dp1" t>{{opt.id}}_{{opt.name}}</option>
</select>
{{opt.id}}{{{opt.name}}
我想根据响应填充obj
JSON对象,我可以这样做。然后我想转到obj
中的子对象,并对其应用ng repeat
,以填充选项
标记
当前执行的ng repeat
给了我undefined undefined
试试这个-
$scope.obj = {
"dropdown1" :{id:"dp2", data:"", options:[]},
"dropdown2":{id:"dp1", data:"", options:[]}
}
$scope.getData = function(category, type){
var params = { "dp1" : category, "dp1__type": type};
PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamSerializer(params)).then(function(response){
$scope.obj.dropdown1.options = response;
});
}
html页面-
<div ng-repeat="dropdown in obj">
<select id="{{dropdown.id}}" ng-model="dropdown.data" ng-options="option.name for option in dropdown.options">
</div>
使用ng option指令正是为了避免在此处使用ng repeat文档{{opt.id}}{{{opt.name}