CODEWITHSUNDEEP
ajaxangularjs
ClosDesign
ClosDesign

Reputation: 3924

Angular JS, AJAX calls on select to fill in another select

Has anyone done anything with AngularJS and select droplists populating another droplist on the page based on a selection.

We have a service we are populating a Select droplist with. But we have another droplist on the page that, when the first droplist's section is made, the second droplist will dynamically populate with information based on the selection of the first droplist.

JSON structure example:

[{
   "Cars":{
     "Type": "Hatchback",
     "Type": "Sedan"
    },
   "Trucks":{
     "Type": "Small",
     "Type": "Full Size"
    }
}]

So if my first <select> droplist contains options for Cars and Trucks, then based on that selection the second <select>droplist will dynamically populate with the 'Type' based on the selection of a Car or Truck.

Does anyone have any insight or point me to any tutorials based on this?

Thanks in advance

Upvotes: 0

Views: 289

Answers (1)

rich green
rich green

Reputation: 1213

Use the option in you first selection to populate the list:

<select ng-model="d1" ng-options="key for key in vehKeys"></select>
<select ng-model="d2" ng-options="t.Type for t in veh[d1]"></select>

my controller looks like this:(I changed your format, as it was, Type would just keep overwriting its self)

$scope.veh = {
   "Cars":[
     {"Type": "Hatchback"},
     {"Type": "Sedan"}
    ],
   "Trucks":[
     {"Type": "Small"},
     {"Type": "Full Size"}
    ]
};

$scope.vehKeys = Object.keys($scope.veh);

I'm not entirely sure why you cannot do something like this though

<select ng-model="d1" ng-options="type for type in Object.keys(veh)"></select>

so I just did it in the controller.

Upvotes: 1

Related Questions