1

我有一个 HTML 表格。

对行进行计数（通过使用$index），并且只显示某些行（通过使用ng-show）。

问题：$index 没有返回正确的计数。表格的计数应该像“1,2,3...”，但事实并非如此。

    <tbody>
        <tr ng-repeat="fruit in basket" ng-show="fruit.isJuicy == type">
            <td>{{$index + 1}}</td>
            <td>{{fruit.Name}}</td>
        </tr>
    </tbody>

这是JSFiddle；不要忘记点击按钮查看问题：http: //jsfiddle.net/f6HCX/2/

是什么导致了这个计数问题？如何解决？

（您能否也评论/评价我的问题描述的清晰度，（容易理解吗？）干杯！）

编辑：这个问题已经回答了。使用过滤器的更多信息：如何在 AngularJS 的过滤器中使用参数？

4

1 回答 1

6

问题是您ng-show用于显示或隐藏单个项目。实际上，这$index是正确计算项目的数量——只是有些是隐藏的，所以你看不到这些值。

如果您仔细查看您的示例，您会发现这些$index值与相关项目的原始索引相匹配。

相反，您想要做的是在列表被渲染之前filter过滤列表，使用过滤器（是的，它的名字真的很容易混淆！）。

只需将您tr的 html 更改为如下所示：

<tr ng-repeat="fruit in basket | filter:{isJuicy:type}">

这是一个功能齐全的 jFiddle。

发生了什么：

过滤器用于根据filter某种搜索参数过滤项目列表。它可以接受一个字符串，它将简单地搜索要过滤的所有对象的所有属性，或者它可以接受一个可用于指定要搜索的字段的对象字面量。

在这种情况下，我们要求它根据哪些项目具有与范围内isJuicy的当前值匹配的参数来过滤列表type。

现在ng-repeat只会麻烦循环匹配的项目，因此$index会按预期增加。

于 2013-07-11T03:29:20.240 回答