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

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用ng-repeat（AngularJS）迭代JSON

5 个答案: