【问题标题】:ng-repeat unknown number of nested elementsng-repeat 未知数量的嵌套元素
【发布时间】:2013-08-18 01:41:49
【问题描述】:

我想知道这类问题是否有简单的解决方案。

我有一个对象注释,它又可以包含 cmets,而这些 cmets 也可以包含 cmets ...并且这可以持续未知数量的循环。

这是数据结构的一个例子:

var comment = {
   text : "",
   comments: [
      { text: "", comments : []},
      { text: "", comments: [
         { text: "", comments : []},
         { text: "", comments : []}
         { text: "", comments : []}
      ]}
   ]
}

假设我会写 2 个级别的 cmets:

<div ng-repeat="comment in comments">
   {{comment.text}}
   <div ng-repeat="comment in comments">
      {{comment.text}}
   </div>
</div>

我将如何为嵌套 cmets 的“n”级实现我的 div?

【问题讨论】:

    标签: javascript angularjs angularjs-ng-repeat


    【解决方案1】:

    最简单的方法是创建一个通用部分,这样您就可以使用ng-include 递归调用和呈现它。

    <div ng-include="'partialComment.html'" ng-model="comments"></div>
    

    这是部分内容:

    <ul>
        <li ng-repeat="c in comments">
          {{c.text}}
          <div ng-switch on="c.comments.length > 0">
            <div ng-switch-when="true">
              <div ng-init="comments = c.comments;" ng-include="'partialComment.html'"></div>  
            </div>
          </div>
        </li>
    </ul>
    

    数据模型应该是一个列表var comments = [{ ... }]

    我为您创建了一个演示,希望对您有所帮助。

    Demo

    【讨论】:

    • 有没有办法隐藏递归中除第一个集合之外的所有元素?
    • @guiomie 你可以检查 ng 中继器中的 $first 参数。
    • 我的意思是隐藏所有不在第一个数组中的元素,而不是每个数组的第一个元素。所以只有第一个 cmets 数组的元素没有隐藏...
    • @guiomie 也许您可以扩展您的数据模型,添加一个名为 isVisible 的新字段,并使其成为纯数据驱动的。
    • 这是我走的路。问题是当我使用 ng-show 时,所有元素都会显示出来......
    【解决方案2】:

    你需要一个递归指令。类似this,或者可能更好this

    【讨论】:

    猜你喜欢
    • 2015-07-05
    • 1970-01-01
    • 1970-01-01
    • 2019-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多