AngularJS - 从嵌套数组中填充两个下拉列表答案

【问题标题】：AngularJS - Populate Two dropdowns from a nested arrayAngularJS - 从嵌套数组中填充两个下拉列表
【发布时间】：2017-04-03 13:12:36
【问题描述】：

这是我从服务中获得的对象的简化版本。

[
  {
    "lookupID": "Annual Leave",
    "lookupCode": "Annual Leave",
    "reasonRecords": [
      {
        "reason": "Annual",
        "docRequired": "N"
      },
      {
        "reason": "Mandatory",
        "docRequired": "N"
      }
    ]
  },
  {
    "lookupID": "Accumulated Leave",
    "lookupCode": "Accumulated Leave",
    "reasonRecords": [
      {
        "reason": "Accumulative",
        "docRequired": "N"
      },
      {
        "reason": "Cancellation",
        "docRequired": "Y"
      }
    ]
  },
  {
    "lookupID": "Study Leave",
    "lookupCode": "Study Leave",
    "reasonRecords": [
      {
        "reason": "Examination Leave",
        "docRequired": "N"
      },
      {
        "reason": "Research Leave",
        "docRequired": "N"
      }
    ]
  }
]

我需要填充两个下拉菜单（可以重复 x 次）

最终结果应如下所示

第一个已经填充并工作，它显示所有可能的 LookupID

<select class="form-control" id="leavetype_{{$index}}" ng-model="leaveEntry.leaveTypeKey" value="leaveEntry.leaveTypeKey" ng-required>
    <option ng-repeat="leaveType in leaveTypes" value="{{leaveType.lookupCode}}">{{leaveType.lookupCode}}</option>
</select>

第二个下拉菜单应根据上一个下拉菜单中选择的lookupCode显示可能的原因

目前只是硬编码来显示第一个lookupCode的原因

<select class="form-control" id="reason_{{$index}}" ng-model="leaveEntry.reason" value="leaveEntry.reason" ng-required>
    <option ng-repeat="reasonRecord in leaveTypes[0].reasonRecords" value="{{reasonRecord.reason}}" >{{reasonRecord.reason}}</option>
</select>

如何动态填充第二个下拉列表？

奖励：然后字段需要根据选择显示适当的 docRequired 值

【问题讨论】：

angularjs ng-options nested json data的可能重复

标签： angularjs

【解决方案1】：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<html>
<head>

<script>
var app = angular.module('myApp', []);
app.controller('ctrl', ['$scope', function($scope) {
 
  $scope.selectData = [
  {
    "lookupID": "Annual Leave",
    "lookupCode": "Annual Leave",
    "reasonRecords": [
      {
        "reason": "Annual",
        "docRequired": "N"
      },
      {
        "reason": "Mandatory",
        "docRequired": "N"
      }
    ]
  },
  {
    "lookupID": "Accumulated Leave",
    "lookupCode": "Accumulated Leave",
    "reasonRecords": [
      {
        "reason": "Accumulative",
        "docRequired": "N"
      },
      {
        "reason": "Cancellation",
        "docRequired": "Y"
      }
    ]
  },
  {
    "lookupID": "Study Leave",
    "lookupCode": "Study Leave",
    "reasonRecords": [
      {
        "reason": "Examination Leave",
        "docRequired": "N"
      },
      {
        "reason": "Research Leave",
        "docRequired": "N"
      }
    ]
  }
]
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ctrl">
<select ng-options="data as data.lookupCode for data in selectData" ng-model="lookupCodeselected"> </select>
 <select ng-disabled="!lookupCodeselected" ng-options="data as data.reason for data in lookupCodeselected.reasonRecords" ng-model="selected2"></select>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

您要做的是在第一次选择中选择整个对象。然后用您选择的对象的子项填充第二个选择。

<select ng-options="n as n.lookupCode for n in data" ng-model="selected">      
  </select>
  <select ng-options="n as n.reason for n in selected.reasonRecords" ng-model="selected2">      
  </select>

http://jsfiddle.net/hLhtbxb8/

【讨论】：