Populate Dropdown 2 based on Dropdown 1 selection and how to iterate when I chose a suboption

Question

Hello everyone I am working with ArgularJs 1.5. I need to populate Dropdown 2 based on Dropdown 1 selection, to show it only if it exists (if DropDown 1 selected had dropDown 2) else don't show Dropdown 2 (deactivate it) and show the values of dropDown selected (either of dropDown 1 or of dropDown 2) into my table.

In this case I have a dropDown 1 named city which has 3 subcity (dropdown 2) I would like to show them when I select city and iterate values (matrix) when I chose one subcity like subcity02

<div ng-app="app" ng-controller="MainController">
    <select ng-model="selectedCity" ng-options="x as (x | cityFilter) for (x, y) in cities">
    </select>

    <select ng-model="selectedSubCity"  ng-options="x as (x | cityFilter) for (x, y) in selectedCity.subCity">
    </select>
</div>

<table>
    <tr ng-repeat="item in selectedCity"><!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
    </tr>
</table>

and this is my script js:

angular.module('app', [])
.filter('cityFilter', function() {
    return function(city) {
        return city.replace('_', ' ');
    }
})
.controller('MainController', ['$scope', function($scope) { 
  $scope.cities = {
    city : [
    {id:'c01' , name:'name1', price:15},
    {id:'c02' , name:'name2', price:18},
    {id:'c03' , name:'name3', price:11},
    {subCity01 : [
            {id:'sub01' , name:'nameSub1', price:1},
            {id:'sub02' , name:'nameSub2', price:8},
            {id:'sub03' , name:'nameSub3', price:1},
    ],
    subCity02 : [
            {id:'ssub01' , name:'nameSsub1', price:1},
            {id:'ssub02' , name:'nameSsub2', price:8},
            {id:'ssub03' , name:'nameSsub3', price:4},
    ],
    subCity03 : [
            {id:'sssub01' , name:'nameSssub1', price:1},
            {id:'sssub02' , name:'nameSssub2', price:2},
            {id:'sssub03' , name:'nameSssub3', price:1},
    ]
},
  ],
    city_02 : [
    {id:'cc01' , name:'name11', price:10},
    {id:'cc02' , name:'name22', price:14},
    {id:'cc03' , name:'name33', price:11},
  ],
    city_03 : [
    {id:'ccc01' , name:'name111', price:19},
    {id:'ccc02' , name:'name222', price:18},
    {id:'ccc03' , name:'name333', price:10},
  ]
    };

this don't fix my issue I can't see the dropDown 2 and I can't iterate its values. Anybody could help me please.

Answer 1

So the first issue here is the data structure - it will not allow you simulate the expected behavior the way it is, so I changed it a little bit:

$scope.cities = [
         {
              name: "city A",
              elements: [{
                    id: 'c01',
                    name: 'name1',
                    price: 15
              }, {
                    id: 'c02',
                    name: 'name2',
                    price: 18
              }, {
                    id: 'c03',
                    name: 'name3',
                    price: 11
              }],
              subsities: [ {
                          name: "sub A1",
                          elements: [{
                                id: 'sub01',
                                name: 'nameSub1',
                                price: 1
                          }, {
                                id: 'sub02',
                                name: 'nameSub2',
                                price: 8
                          }, {
                                id: 'sub03',
                                name: 'nameSub3',
                                price: 1
                          } ]
                    },
                     {
                          name: "sub A2",
                          elements: [{
                                id: 'ssub01',
                                name: 'nameSsub1',
                                price: 1
                          }, {
                                id: 'ssub02',
                                name: 'nameSsub2',
                                price: 8
                          }, {
                                id: 'ssub03',
                                name: 'nameSsub3',
                                price: 4
                          } ]
                    },
                     {
                          name: "sub A3",
                          elements: [{
                                id: 'sssub01',
                                name: 'nameSssub1',
                                price: 1
                          }, {
                                id: 'sssub02',
                                name: 'nameSssub2',
                                price: 2
                          }, {
                                id: 'sssub03',
                                name: 'nameSssub3',
                                price: 1
                          }]
                    }
              ]
        },
         {
              name: "city B",
              elements: [{
                    id: 'cc01',
                    name: 'name11',
                    price: 10
              }, {
                    id: 'cc02',
                    name: 'name22',
                    price: 14
              }, {
                    id: 'cc03',
                    name: 'name33',
                    price: 11
              } ]
        },
        {
              name: "city C",
              elements: [{
                    id: 'ccc01',
                    name: 'name111',
                    price: 19
              }, {
                    id: 'ccc02',
                    name: 'name222',
                    price: 18
              }, {
                    id: 'ccc03',
                    name: 'name333',
                    price: 10
              } ]
        }
  ];

Second change: I added ng-change event on both dropdowns and the HTML is now :

<body ng-controller="MainCtrl">
  <select ng-model="selectedCity"      ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
  </select>

  <select ng-show="selectedCity.subsities" ng-model="selectedSubCity"      ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
   </select>

  <table>
        <tr ng-repeat="item3 in data track by item3.id">
              <!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
              <td>{{ item3.id }}</td>
              <td>{{ item3.name }}</td>
              <td>{{ item3.price }}</td>
        </tr>
  </table>

</body>

And third - the change event:

$scope.extractSubsities = function(itemSelected) {
    if(itemSelected && itemSelected.elements){
        $scope.data = itemSelected.elements;
    }
  }

A full working demo is here