1

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

为什么？：

我不能循环，ul.items因为那个盒子的高度是height: 100%，我需要那个高度来定位子节点。

另外，我需要按$index顺序li.items排列。

<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>
4

1 回答 1

2

这是 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

    • 于 2014-07-18T00:46:24.147 回答