Question

我尝试创建一个父子项下拉菜单样式，类似于这个小提琴示例Check it out!。

我遇到的问题是我的JSON并没有像孩子一样在这个例子中返回一个paraent ID。这里的参考是我的JSON：

http://plnkr.co/edit/ia3hqKojbZZH6dAJ0ZFz

如您所见，有一个主要链接以主要父母开头。在那里你得到了起始类别。更有可能的是：

Sports
    - soccer
Adademics
    - math

其他类别也可能有子孩子，但我真的只需要层次的前两个级别，在那之后我可以将子子列表简单地缩进到第二级。我的痛点在于如何将父母与孩子连接起来而没有孩子对父母的引用。例如，在我的来自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中提供的数据）：http://plnkr.co/S5RCMv

使用Angularjs从JSON源创建动态父子项下拉列表

1 个答案: