使用Angularjs從JSON源創建動態父子項下拉列表

Question

我正在嘗試創建一個父子項下拉樣式的選擇器類似於這個小提琴示例在這里檢查出來！ 。

我遇到的問題是我的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>

這是一個工作插件作為示例（我使用插件中提供的數據）： http ： //plnkr.co/S5RCMv