找到一个NG重复索引？ [英] Finding an ng-repeat index?

问题描述

我可以在Angular.js做到这一点：

I can do this in Angular.js:

<tr ng-repeat="cust in customers">
  <td>
    {{ cust.name }}
  </td>
</tr>

这将通过把每一个通过所有的客户迭代一​​个＆LT; TR方式＆gt; 自身

但是，如果我想要两个客户在一个＆LT; TR＆GT; ？我将如何实现这一目标？

But what if I wanted two customers in one <tr>? How would I accomplish that?

我通常做，通过与索引和模量值乱搞，但我不知道怎么做，在这里。

I normally do that by messing around with indexes and modulus values, but I'm not sure how to do that here.

推荐答案

原来，这可以没有任何自定义过滤器或更改数据的格式来完成，但它确实需要一些额外的标记。我认为这woudn't有可能在第一，你不能使用跨度或任何在表中类似的为你的 NG-重复。然而这个答案指出，你可以使用一个 TBODY 。

It turns out this can be done without any custom filters or changing the format of your data, though it does require some extra markup. I thought this woudn't be possible at first as you can't use a span or anything similar within the table for your ng-repeat. This answer however, points out that you can use a tbody.

所以它只是使用 NG-如果指令（这使得HTML如果EX pression为真），的情况下$指数变量和 $甚至变量（由 NG-重复提供）（其也是由提供NG-重复和为真时， $指数甚至

So it's just a case of using the ng-if directive (which renders html if the expression is true), the $index variable (provided by ng-repeat) and the $even variable (which is also provided by ng-repeat and is true when $index is even

我创建了一个这Plunker

<div  ng-controller="MainCtrl">
  <table>
    <tbody ng-repeat="cust in customers">
      <tr ng-if="$even">
        <td>{{customers[$index].text}}</td>
        <td>{{customers[$index+1].text}}</td>
      </tr>
    </tbody>
  </table>
</div>

这当然会只有当你有两列工作，如果你有吗？那么你也可以把一个完整的前pression到 NG-如果，而不仅仅是一个变量。所以，你可以使用模量值是这样的：

This would of course only work if you have two columns, what if you have more? Well you can also put a full expression into ng-if rather than just a variable. So you can use modulus values like this:

    <tbody ng-repeat="cust in customers">
      <tr ng-if="($index % 3) == 0">
        <td>{{customers[$index].text}}</td>
        <td>{{customers[$index+1].text}}</td>
        <td>{{customers[$index+2].text}}</td>
      </tr>
    </tbody>

这篇关于找到一个NG重复索引？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！