Fabian Fabian - 2 months ago 7
AngularJS Question

Iterate over JSON with ng-repeat (AngularJS)

So I have a JSON file and i want to have 2 select options


  • First to select the name (e.g: 'Dev01')

  • Second to select one vlan of the first one



So this is inside my controller:

$scope.VLANSelection = {};

$scope.VLANSelection.selectedOption = null;

$scope.VLANSelection.availableOptions = [
{name: 'Prod01', vlans: [
{VlanName: 'ProdVLANHome', id: 0},
{VlanName: 'ProdVLANOffice', id: 1}
]},
{name: 'Prod02', vlans: [
{VlanName: 'Prod02VLANHome', id: 0},
{VlanName: 'Prod02VLANOffice', id: 1}
]},
{name: 'Test01', vlans: [
{VlanName: 'Test01VLANHome', id: 0},
{VlanName: 'Test01VLANOffice', id: 1}
]},
{name: 'Test02', vlans: [
{VlanName: 'Test02VLANHome', id: 0},
{VlanName: 'Test02VLANOffice', id: 1}
]},
{name: 'Dev01', vlans: [
{VlanName: 'Dev01VLANHome', id: 0},
{VlanName: 'Dev01VLANOffice', id: 1}
]},
{name: 'Dev02', vlans: [
{VlanName: 'Dev02VLANHome', id: 0},
{VlanName: 'Dev01VLANOffice', id: 1}
]},
{name: 'sdf', vlans: [
{VlanName: 'Tui01VLANHome', id: 0},
{VlanName: 'Tui02VLANOffice', id: 1}
]},
{name: 'dsf', vlans: [
{VlanName: 'TuiProdVLANHome', id: 0},
{VlanName: 'TuiProdVLANOffice', id: 1}
]}
];


My first selection looks like this:

<select class="form-control col-md-9" ng-model="VLANSelection.selectedOption" id="SecurityZoneInput">
<option ng-repeat="option in VLANSelection.availableOptions" ng-value="{{option}}">{{option.name}}</option>
</select>


And my second selection:

<select class="form-control col-md-9" id="ProdNameInput">
<option ng-repeat="vlan in VLANSelection.selectedOption track by $index" ng-value="{{vlan.VlanName}}">{{vlan.VlanName}}</option>
</select>


The First selection looks fine, but inside the second selection I have many empty elements, instead of the 2 Vlan names that should be inside.

So again, if I select 'Prod01' you should see 'ProdVLANHom' and 'ProdVLANOffice' inside the second selection.

Can someone help me?

Answer

angular.module('mymodule', []);
angular.module('mymodule')
  .controller('myctrl', function($scope) {

    var vm = this;

    vm.selectedOption = null;

    vm.availableOptions = [{
      name: 'Prod01',
      vlans: [{
        VlanName: 'ProdVLANHome',
        id: 0
      }, {
        VlanName: 'ProdVLANOffice',
        id: 1
      }]
    }, {
      name: 'Prod02',
      vlans: [{
        VlanName: 'Prod02VLANHome',
        id: 0
      }, {
        VlanName: 'Prod02VLANOffice',
        id: 1
      }]
    }, {
      name: 'Test01',
      vlans: [{
        VlanName: 'Test01VLANHome',
        id: 0
      }, {
        VlanName: 'Test01VLANOffice',
        id: 1
      }]
    }, {
      name: 'Test02',
      vlans: [{
        VlanName: 'Test02VLANHome',
        id: 0
      }, {
        VlanName: 'Test02VLANOffice',
        id: 1
      }]
    }, {
      name: 'Dev01',
      vlans: [{
        VlanName: 'Dev01VLANHome',
        id: 0
      }, {
        VlanName: 'Dev01VLANOffice',
        id: 1
      }]
    }, {
      name: 'Dev02',
      vlans: [{
        VlanName: 'Dev02VLANHome',
        id: 0
      }, {
        VlanName: 'Dev01VLANOffice',
        id: 1
      }]
    }, {
      name: 'sdf',
      vlans: [{
        VlanName: 'Tui01VLANHome',
        id: 0
      }, {
        VlanName: 'Tui02VLANOffice',
        id: 1
      }]
    }, {
      name: 'dsf',
      vlans: [{
        VlanName: 'TuiProdVLANHome',
        id: 0
      }, {
        VlanName: 'TuiProdVLANOffice',
        id: 1
      }]
    }];

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="mymodule">
  <div ng-controller="myctrl as ct">
    <div>
      {{ct.selectedOption}}
    </div>
    <select ng-model="ct.selectedOption" ng-options="item  as item.name for item in ct.availableOptions">
      <option ng-repeat="option in ct.availableOptions" ng-value="{{option}}">{{option.name}}</option>
    </select>

    <select ng-model="ct.selectedOption1" ng-options="item as item.VlanName for item in ct.selectedOption.vlans">
      <option ng-repeat="vlan in ct.selectedOption.vlans" ng-value="{{vlan.VlanName}}">{{vlan.VlanName}}</option>
    </select>
  </div>
</body>

Comments