使用AngularJS動態構建一棵樹

我在AngularJS中很新，所以我的問題可能非常瑣碎，但我沒有在網絡上找到任何可以幫助我的答案。以JSON形式使用AngularJS動態構建一棵樹

有數據，如：

{ 
    "Part 1": { 
     "Group 1": { 
      "Link 1": "href1", 
      "Link 2": "href2" 
     }, 
     "Group 2": { 
      "Link 3": "href3" 
     } 
    }, 
    "Part 2": { 
     "Link 4": "href4", 
     "Link 5": "href5", 
     "Link 6": "href6" 
    } 
}

我想現在它以樹的形式。例如，如：

1. Part 1 
    a. Group 1 
     - Link 1 
     - Link 2 
    b. Group 2 
     - Link 3 
2. Part 2 
    - Link 4 
    - Link 5 
    - Link 6

樹的葉子表示可以單擊的鏈接。可以有一個或兩個級別的嵌套，所以它可能有點問題。

這是可能使用ngRepeat指令或從AngularJS的任何其他方式嗎？

來源

2014-02-19 zmark

有你的JSON響應一個布爾參數（isGrouping），這將讓你區分是否格羅是否存在。 – Sai

我知道使用此參數會更容易，但我不允許更改json消息結構。 – zmark

使用指令無疑是更合適的解決方案，但如果你願意，你可以使用NG-重複（雖然它不是最優雅的解決方案），看到小提琴：http://jsfiddle.net/ADukg/4764/

您可以使用這樣的事情：

<div ng-controller="MyCtrl"> 
    <div ng-repeat="(item, children) in data"> 
     {{item}} 
     <div ng-repeat="(child, moreChildren) in children"> 
      <div class="child" ng-show="isGroup(child)"> 
       {{child}} 
       <div class="leaf" ng-repeat="(leaf, leafValue) in moreChildren"> 
        {{leaf}} - {{leafValue}} 
       </div> 
      </div> 
      <div class="leaf" ng-show="!isGroup(child)"> 
       {{child}} - {{moreChildren}}    
      </div> 
     </div>    
    </div> 
</div>

有了一個基本的檢查：

$scope.isGroup = function(item) { 
    return item.indexOf('Group') == 0;  
};

來源

2014-02-19 16:34:26

謝謝。對我來說這是一個很好的解決方案，因爲我可以假定樹不超過3個級別。在我的情況下不需要遞歸，但可以使用遞歸。條件是Group不是很有用，因爲「Group」不是固定的短語。但我用另一個檢查足夠我的情況：typeof item =='string'; – zmark

使用指令將是完美的，但只使用ng-repeat不會使它成爲恕我直言。

您將需要一個遞歸指令。在this thread（其中最好的方法是Mark Lagendijk描述的方法）中有多種方法可以實現你想要描述的內容。

來源

2014-02-19 16:30:26 ThomasC

使用AngularJS動態構建一棵樹

回答

相關問題