I have JSON like this
{
"cars":[
{
"id":"012",
"model":"honda",
"parts":[
{
"id":"p1",
"name":"tyre",
},
{
"id":"p2",
"name":"muffler",
}
]
},
{
"id":"022",
"model":"vw",
"parts":[
]
}
]
}
I am new to AngularJS and I have 2 dropdowns, dropdown1 showing car models like:
DROPDOWN1
honda
vw
and dropdown 2 that is supposed to be loaded with parts for selected car model in dropdown1. For example, if I select "honda" in dropdown1, dropdown2 should be loaded with:
DROPDOWN2
tyre
muffler
If I select "vw" in dropdown1, then dropdown2 will not load since there are no parts for VW.
I have html with 2 select (dropdowns) like this, note that I am using ng-options rather than repeat:
<p><strong>Select a car</strong></p>
<select
required
ng-change="selectCarAction()"
ng-model="selectCar"
ng-options="car.model for car in cars track by car.id">
<option value="" label="Select a car"></option>
</select>
<p><strong>Select a part</strong></p>
<select
required
ng-model="selectPart"
ng-options="part.name for partin car.part track by part.id">
<option value="" label="Select a part"></option>
</select>
And in my js file, I get my car response data like:
$scope.myData= JSON.stringify(myresponse.data);
$scope.cars= myData.data.cars;
, then I have function to get selected car and the intention is to also load dropdown2 once I get selected car:
$scope.selectCarAction = function(){
if ($scope.selectCar == null){
console.log("You selected car: N/A");
} else {
console.log("You selected car: " + $scope.selectCar.model);
$scope.parts= $scope.selectCar.parts;
// How do I load these parts in DROPDOWN2 above?
}
};
While my DROPDOWN1 loads fine, my DROPDOWN2 is never loaded but in the js function above, my $scope.parts gets the parts. How do I load these into my DROPDOWN2?
