使用Angularjs從JSON提要創建動態父級子級降落

我正在嘗試創建一個類似於此小提琴示例Check it out!的父級子級降級類型選擇。使用Angularjs從JSON提要創建動態父級子級降落

我遇到的問題是我的JSON不像本例中使用的那樣在子內返回一個paraent ID。以供參考下面是我的JSON：

http://plnkr.co/edit/ia3hqKojbZZH6dAJ0ZFz

正如你所看到的，就是開始爲主體的母公司主要環節。在那裏你可以得到起始類別。更多的則很可能這將是這樣的：

Sports 
    - soccer 
Adademics 
    - math

其他類別可以有子的孩子們，但我真的只需要層次結構的前兩個層次，並在該點之後，我可以列出子孩子的只是在第二級縮進。我的痛點是我如何將父母與孩子連接起來，而不需要孩子將父母引用。例如，在我的來自plunkr的JSON中，我想要選擇父事件，然後選擇它，然後用Granduation，Homecoming，Prom和Spirituality填充第二個下拉列表。

Events 
    - Prom 
    - Homecoming 
    - Graduation 
    - Spirituality

任何想法？

來源

2014-10-09 Mr. BigglesWorth

解決此問題的最簡單方法是將整個對象用作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

來源

2014-10-11 18:54:54 shizik

啊，這使得有很大的意義！但是，如果我走這條路線，目標是將選擇的最新ID傳遞給表單（在我的情況下，formData.cat_id，如果模型包含所有內容，我該怎麼做？難的部分似乎是我將如何從最後一個下拉選擇中選擇最後一個ID並將其傳遞給表單 – 2014-10-11 19:42:22

如果您只需要最後一個下拉列表中的ID，您可以更改最後一個下拉菜單的ng選項，例如：ng-options =「gc.id as gc.name for gc in selectedChild.children」''。這樣'selectedGrandchild'將包含ID而不是整個對象。 – shizik 2014-10-11 20:20:21

我需要的ID是哪個選擇項是最後一個如果用戶只去了第一個下拉菜單並選擇了Academy並且沒有使用其他的下拉菜單，我只會從那裏拿到ID然後發送給它，但是如果他們選擇了Academy，然後選擇了第二個事件下拉菜單，我只需要發送事件中的ID即可y一般選擇的最後一個ID。 – 2014-10-12 16:23:52

使用Angularjs從JSON提要創建動態父級子級降落

回答

相關問題