我是 AngularJS 的新手,但到目前为止我真的很喜欢使用它。我使用 AngularJS 的 ng-repeat 在 HTML 中创建树结构,其中节点的子节点 a 放置在节点的标记中,如下所示:
<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 的其他内容相比,这似乎不是很有效,也不是很惯用。我希望能够找到一种方法来在模板部分中以更具声明性的方式执行此操作。请帮忙!