javascript - 使用 Angularjs 从 JSON 提要创建动态父子下拉列表

Question

我正在尝试创建类似于此 fiddle 示例的选择器的父子下拉样式 Check it out! .

我遇到的问题是我的 JSON 没有像本示例中那样返回子项中的父 ID。以下是我的 JSON 供引用:

http://plnkr.co/edit/ia3hqKojbZZH6dAJ0ZFz

如您所见，有一个主链接作为主父链接开始。在那里你可以获得起始类别。这更有可能是这样的:

Sports
    - soccer
Adademics
    - math

其他类别也可以有子子项，但我实际上只需要层次结构的前两层，在那之后我可以将子子项列为第二层中的简单缩进。我的痛点是我如何在没有 child 引用 parent 的情况下将 parent 与 child 联系起来。例如，在我来自 plunkr 的 JSON 中，我想获取父事件，并在选择它后用 Granduation、Homecoming、Prom 和 Spirituality 填充第二个下拉列表。

Events
    - Prom
    - Homecoming
    - Graduation
    - Spirituality

有什么想法吗？

Answer 1

解决此问题的最简单方法是将整个对象用作 ng-model 而不是使用 id。这是一个示例标记:

  <select ng-model="selectedParent" 
          ng-change="selectedChild=null"
          ng-options="p as p.name for p in items">
      <option value="">-- Choose Parent --</option>
  </select>

  <select ng-model="selectedChild" ng-disabled="!selectedParent" 
          ng-change="selectedGrandchild=null"
          ng-options="c as c.name for c in selectedParent.children">
    <option value="">-- Choose Child --</option>
  </select>

  <select ng-model="selectedGrandchild" ng-disabled="!selectedChild" 
          ng-options="gc as gc.name for gc in selectedChild.children">
    <option value="">-- Choose Grandchild --</option>
  </select>

这里有一个工作 plunk 作为示例(我使用了 plunk 中提供的数据):http://plnkr.co/S5RCMv