Angular Populate下拉选项,在运行时选择下拉列表时动态显示

时间:2017-11-23 13:41:03

标签: javascript angularjs json angularjs-ng-repeat html-select

我有一个包含下拉列表名称的JSON对象,看起来像这样 -

$scope.obj = { 
    "dp1" :{},
    "dp2" :{}
}

对象dp1dp2对应于相应的下拉列表。这些对象将通过下拉列表引用以填充其options标记。

接下来我有一个像这样的REST调用函数 -

$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>

我想基于响应来填充obj JSON对象,我能够这样做。然后我想转到obj中的子对象并在其上应用ng-repeat来填充options标记。

ng-repeat的当前实施为我提供了undefined undefined

1 个答案:

答案 0 :(得分:1)

试试这个 -

$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 page -

<div ng-repeat="dropdown in obj">
   <select id="{{dropdown.id}}" ng-model="dropdown.data" ng-options="option.name for option in dropdown.options">
</div>