Question

我是AngularJS的新手，但到目前为止我真的很喜欢它。我使用AngularJS的ng-repeat在HTML中创建树结构，其中节点的子节点在中放置节点的标记，如下所示：

<div class="parent">
    I am the parent node.
    <div class="child">
        I am a child node.
        <div class="child">
            I am a grandchild.
            etc...
        </div>
    </div>
</div>

但我想做的是使用相同的数据（树）来制作这样的标记：

<div class="parent">I am the parent</div>
<div class="child">I am a child</div>
<div class="child">I am a grandchild</div>
<div class="child">I am a great-grandchild</div>
etc....

即列表。我想出的唯一方法就是在我的容器对象上创建一个名为visibleDescendants的新方法，它创建一个数组，看起来很像这样：

this.visibleDescendants = function(a) {
  if (!a) a = [];
  if (this.selected()) {
    a.push(this);
    if (this.hasChildren()) {
      this.children().forEach(function(child) {
        if (child.selected()) {
          a = child.visibleDescendants(a);
        }
      });
    }
  }
  return a;
};

然后像这样设置控制器/模板：

$scope.visibleDescendants = $scope.container.visibleDescendants();
<div ng-repeat="column in visibleDescendants">...</div>

然后每当其中一个节点设置为selected(false)时，我重置$ scope.visibleDescendants。

与我一直在阅读/使用AngularJS的其他内容相比，这似乎不是非常有效，也不是非常惯用。我希望能够在模板partial中以声明方式找到一种方法来代替。请帮忙！

Answer 1

我认为我真正想要做的是演示问题，不应该影响标记。换句话说，数据和标记应该在结构上/语义上匹配;只有CSS应该改变它的外观。

尽管如此，我认为将数据重组用于演示目的是不明智的。

层次结构的ng-repeat显示为列表

1 个答案: