Angular Populate dropdown options dynamically while selecting dropdown in runtime

Question

I have a JSON object containing names of dropdown and looks something like this -

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

Objects dp1 and dp2 correspond to respective dropdowns. These objects will be referred by dropdown to populate their options tag.

Next I have a REST call function like this -

$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;
    });
}

I am able to assign the response to $scope.obj.dp1
The reponse object looks like this-

{ "id" : 1, "name" : "john" }

Finally, my dropdown looks like this -

<select id="d1" ng-model="d1">
    <option ng-repeat="opt in obj.dp1" t>{{opt.id}}_{{opt.name}}</option>
</select>

I want to populate the obj JSON object based on response, which I able to. Then I want to go to sub object in obj and apply ng-repeat on that to populate the options tag.

Current implementation of ng-repeat gives me undefined undefined .

use the ng-option directive its exactly for this purpose to avoid using ng-repeat documentation here docs.angularjs.org/api/ng/directive/ngOptions — Panos K
– Panos K, Commented Nov 23, 2017 at 15:50
<option ng-repeat="opt in obj.dp1" ng-value='opt.id'>{{opt.id}}_{{opt.name}}</option> — Slava Utesinov
– Slava Utesinov, Commented Nov 24, 2017 at 5:46

ssaket · Accepted Answer · 2017-11-25 05:40:07Z

1

try this-

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

edited Nov 25, 2017 at 5:40

answered Nov 24, 2017 at 9:23

ssaket

364 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Populate dropdown options dynamically while selecting dropdown in runtime

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related