AngularJS ile İlişkisel (Birbirine Bağlı) Dropdown (Select – Options) Oluşturma

AngularJS kullanarak JSON verimizi alıp Dropdown oluşturarak seçenekleri doldurmayı deneyeceğiz.

Örnek json verimiz aşağıdaki gibi olacak:

$scope.countries = [{  
        name: "UK",  
        cities: [{  
            name: "UK 1"  
        }, {  
            name: "UK 2"  
        }, {  
            name: "UK 3"  
        }]  
    }, {  
        name: "US",  
        cities: [{  
            name: "US 1"  
        }, {  
            name: "US 2"  
        }, {  
            name: "US 3"  
        }]  
    }, {  
        name: "India",  
        cities: [{  
            name: "India 1"  
        }, {  
            name: "India 2"  
        }, {  
            name: "India 3"  
        }]  
    }];  

HTML kodumuz ise bu şekilde :

<span>Country</span>
<select ng-model="ctr" ng-options="country.name for country in countries">
   <option value="" disabled selected>{{text.SelectUnit}}</option>
</select>
<br />
<span>City</span>
<select ng-model="sunit" ng-options="city.name for city in ctr.cities">
   <option value="" disabled selected>{{text.SelectCode}}</option>
</select>

Kodu aşağıdaki linkten test edebilirsiniz.

https://codepen.io/ozguravci78/pen/xxvyQoO