javascript - 使用 AngularJS 动态构建树

Question

我对 AngularJS 很陌生，所以我的问题可能非常微不足道，但我没有在网络上找到任何可以提供帮助的答案。

拥有 json 形式的数据，例如:

{
    "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 的任何其他方式来做到这一点？

Answer 1

使用指令绝对是更合适的解决方案，但是如果您愿意，您可以使用 ng-repeat (尽管它不是最优雅的解决方案)，请参阅 fiddle: 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;      
};