使用ng-repeat（AngularJS）遍历JSON

Question

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

• First to select the name (eg: '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 1

Whenever you are using an angular directive , no need to use angular expression binding ng-value="{{option}}" , Instead you need to give like this ng-value="option"

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

<select class="form-control col-md-9"  id="ProdNameInput" ng-model="selected" ng-options="vlan.VlanName for vlan in VLANSelection.selectedOption.vlans" ng-value="vlan">
    </select>

Answer 2

For clarification, where is the logic that sets VLanSelection.selectedOption?

I see that you instantiated it and set it to null, which coincidently is why it is showing empty elements.

Try initializing it like this: $scope.VLANSelection.selectedOption = {}; Just the same as you did the Parent.

Answer 3

Use of ng-options might be more clear and appropriate here

 <select class="form-control col-md-9" ng-model="VLANSelection.selectedOption" 
    id="SecurityZoneInput" 
ng-options="option as option.name for option in VLANSelection.availableOptions">
 </select>


  <select class="form-control col-md-9" ng-model="test"  id="ProdNameInput" 
ng-options="vlan as vlan.VlanName for vlan in VLANSelection.selectedOption.vlans">
  </select>

Answer 4

 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> 

Answer 5

Just try it using ng-options

first select:

<select ng-options="option.name for option in VLANSelection.availableOptions" ng-model="VLANSelection.selectedOption" id="SecurityZoneInput">
  </select>

and second select

<select ng-options="vlan.VlanName for vlan in VLANSelection.selectedOption.vlans track by $index" ng-model="VLANSelection.secondSelect" class="form-control col-md-9" id="ProdNameInput">