如何使用 ng-repeat 循环标记的内部内容但不重复父级

Posted 2023-02-22

【中文标题】如何使用 ng-repeat 循环标记的内部内容但不重复父级

【英文标题】：How to use ng-repeat to loop over inner contents of markup but not duplicate parent

【发布时间】：2014-09-09 00:55:21

【问题描述】：

如何在不重复 ul.items 每次迭代的情况下遍历 ul.items（例如 li.item）的子节点。

为什么？

我无法遍历ul.items，因为该框的高度为height: 100%，我需要该高度来定位子节点。

另外，我需要li.items 中的$index。

<ul class="items" ng-repeat="(keyHotspots, valHotspots) in pageValue.hotspots">
    <li class="item" ng-if="areashape == 'rectangle'" ng-style="pageRatioRect"; 
                                    ">
            <ul class="item-attr">
                <li><a href="">see details</a>
                </li>
                <li><a href="">add to quicklist</a>
                </li>
                <li><a href="">share</a>
                </li>

            </ul>

        </li>
        <li class="item" ng-if="areashape == 'polygon'" ng-style="pageRatioPoly"; 
                                    ">
            <ul class="item-attr">
                <li><a href="">see details</a>
                </li>
                <li><a href="">add to quicklist</a>
                </li>
                <li><a href="">share</a>
                </li>

            </ul>

        </li>
</ul>

【参考方案1】：

这是 ngRepeat 指令中的常见误解。你不要把它放在父母身上。你把它放在你想要重复的项目上——

在这种情况下。只需将其向下移动一行。

您的情况稍微复杂一些，因为您显然要发出两个背靠背的 LI 标签，我不确定您要在这里渲染什么。看起来好像您正在尝试根据从数据集中呈现的元素类型发出不同的 LI 结构。这是真的吗？

如果你真的想这样做，UL>LI 结构有点尴尬，因为看起来你仍然希望你的 ngIf 处于与 ngRepeat 不同的 DOM 级别。因此，您可能需要 LI 上的 ngRepeat，并在其中为 ngIf 选项添加一个 DIV。 （你也应该看看 ngSwitch。”）

我是在问这个问题，而不是仅仅假设，因为您实际上并没有改变内部结构。两者之间的唯一区别是您的 ngStyle。我不知道你是否遇到过这个问题，但你绝对可以根据参数驱动 ngStyle。你完全可以在没有 ngIf 的情况下做到这一点：

<ul class="items">
  <li class="item" ng-repeat="(keyHotspots, valHotspots) in pageValue.hotspots"
      ng-if="areashape === 'rectangle' && pageRatioRect ||
           areashape === 'polygon' && pageRatioPoly">
    <ul class="item-attr">
      <li><a href="">see details</a></li>
      <li><a href="">add to quicklist</a></li>
      <li><a href="">share</a></li>
    </ul>
  </li>
</ul>

请注意，您需要最新版本的 AngularJS 来支持这一点 - 1.3.x IIRC。但是，如果这对您来说不错，我肯定会借此机会探索指令。您正处于让这些成为您的一大优势的边缘，因为我可以看到这些将成为某种“智能”对象进行显示，并且能够添加诸如点击之类的东西将是一个优势这些操作条目的处理程序等。这样做的好处是您还可以更聪明地使用该 ngStyle 来实现您想要实现的目标。

这是一个 Plunkr 使用指令说明概念。 IMO 这是一种更简洁的风格，在您增强这些功能时为您提供了很大的灵活性： http://plnkr.co/edit/Gl1igyTGffYuSaw9PbiD?p=preview

【讨论】：

你能告诉我如何在不使用 ng-if 的情况下做到这一点吗？

当然，请看上面 - 我添加了一个 Plunkr 来说明这一点。