使用ng-repeat (AngularJS)遍历JSON

Iterate over JSON with ng-repeat (AngularJS)

本文关键字：遍历 JSON AngularJS ng-repeat 使用      更新时间：2023-09-26

我有一个JSON文件，我想有两个选择选项

  • 首先选择名称(例如:'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'，你会在第二个选区中看到' prodvlanhm '和'ProdVLANOffice'。

有人能帮帮我吗?

当你使用angular指令时，不需要使用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>


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>

澄清一下，设置VLanSelection.selectedOption的逻辑在哪里?

我看到您实例化了它并将其设置为null，这恰好是它显示空元素的原因。

尝试像这样初始化它:$scope.VLANSelection。selectedOption = {};

在这里使用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>

试试ng-options

第一选择:

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

相关文章：