使用ng-repeat（AngularJS）遍歷JSON

Question

所以我有一個JSON文件，我想有2個選擇選項

• 首先選擇名稱（例如：'Dev01'）
• 第二個選擇第一個VLAN

所以這是在我的控制器內部：

    $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}
                ]}
        ];

我的第一個選擇如下所示：

<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>

我的第二個選擇：

<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>

第一個選擇看起來不錯，但是在第二個選擇內部，我有許多空元素，而不是應該在其中的2個Vlan名稱。

再次如此，如果我選擇“ Prod01”，則第二個選擇內應顯示“ ProdVLANHom”和“ ProdVLANOffice”。

有人能幫我嗎？

Answer 1

每當您使用angular指令時，都無需使用綁定角度表達式ng-value="{{option}}" ，而是需要這樣給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

為了澄清起見，設置VLanSelection.selectedOption的邏輯在哪里？

我看到您實例化了它並將其設置為null，這恰巧是它顯示空元素的原因。

嘗試像這樣初始化它：$ scope.VLANSelection.selectedOption = {}; 就像您做父母一樣。

Answer 3

在這里使用ng-options可能更清晰和適當

 <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

只需使用ng-options嘗試一下

首先選擇：

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