CODEWITHSUNDEEP
javascriptangularjs
anub
anub

Reputation: 527

How to get corresponding array of objects of dropdown selected value as list?

I have a basic dropdown which contains array of objects (countries), and for each object there would be array of objects (cities). So, if I select a country in a dropdown, I have to display the list of cities in that object on ng-change.

Here is my code:

JavaScript:

   $scope.data = [
   {
  "id": 1,
  "countryName": "India",
  "cities": [
    {
        "id": 11,
        "cityName": "hyderabad"
    },
    {
        "id": 12,
        "cityName": "Bengaluru"
    },
    {
        "id": 13,
        "cityName": "Mumbai"
    },
    {
        "id": 14,
        "cityName": "Delhi"
    }
   ]
 },
{
  "id": 2,
  "countryName": "Afghanisthan",
  "cities": [
    {
        "id": 21,
        "cityName": "kabul"
    },
    {
        "id": 22,
        "cityName": "kandahar",
    },
    {
        "id": 23,
        "cityName": "herat"
    }
  ]
},
{
  "id": 3,
  "countryName": "Alaska",
  "cities": [
    {
        "id": 31,
        "cityName": "Fairbanks"
    },
    {
        "id": 32,
        "cityName": "Juneau"
    },
    {
        "id": 33,
        "cityName": "Anchorage"
    }
  ]
}
]

Html:

        <select>
            <option ng-repeat="user in data | filter:search:strict" ng-
       click="selectedItem()">{{user.countryName}}</option>

        </select>

Upvotes: 1

Views: 490

Answers (1)

yBrodsky
yBrodsky

Reputation: 5041

<select ng-options="n as n.countryName for n in data" ng-model="selected">      
  </select>
<ul>
  <li ng-repeat="n in selected.cities">
    {{n.cityName}}
  </li>
</ul>

Upvotes: 1

Related Questions