所以我有一個JSON文件，我想有2個選擇選項遍歷JSON與NG-重複（AngularJS）

首先選擇的名稱（例如：「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'。

有人可以幫助我嗎？

來源

2016-09-23 Fabian

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>

來源

2016-09-23 10:52:26 ram1993

看起來真棒，謝謝！現在我只需要整合它;） – Fabian

澄清，設置VLanSelection.selectedOption的邏輯在哪裏？

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

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

來源

2016-09-23 10:28:31

我沒有任何更多的邏輯來設置VLanSelection.selectedOption。我嘗試設置爲{}，沒有區別。當我嘗試

我可以看到：[對象對象]，[對象對象]，這應該很好，我猜...但不知何故第二個ng重複不起作用 – Fabian

我的HTML：http ：//i.stack.imgur.com/C3anx.png – Fabian

每當你使用角指令，沒有必要使用角度表達結合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>

來源

2016-09-23 10:38:25

謝謝，但依然沒有改變。 – Fabian

你可以分享一個沉悶的東西嗎？ –

這裏你去：http://jsfiddle.net/Lvc0u55v/9937/只是'安全區'和'名稱'下拉是重要 – Fabian

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

來源

2016-09-23 10:49:26 JuniorDev

試試看使用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">

來源

2016-09-23 10:56:59

遍歷JSON與NG-重複（AngularJS）

回答

{{VLANSelection.selectedOption}}

遍歷JSON與NG-重複（AngularJS）

回答

{{VLANSelection.selectedOption}}

相關問題