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将不会使其成为恕我直言。

您需要一个递归指令。有多种方法可以实现this thread中所描述的内容（其中最好的方式是Mark Lagendijk所描述的那种方式）。

Answer 2

使用指令绝对是更合适的解决方案，但如果你愿意，可以使用ng-repeat（尽管它不是最优雅的解决方案），请参阅小提琴：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;      
};

使用AngularJS动态构建树

2 个答案: