Question

我有一个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/

导致此计数问题的原因是什么？怎么解决？

（请你评论/评价我的问题的描述清晰度，（容易理解吗？）欢呼！）

编辑：这个问题已得到解答。使用过滤器的更多信息：How to use parameters within the filter in AngularJS?

Answer 1

问题是您使用ng-show来显示或隐藏单个项目。实际上，$index正确计算了项目的数量 - 只是隐藏了一些项目，因此您无法看到这些值。

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

相反，您想要做的是使用filter过滤器（过滤列表，然后使用tr过滤器令人困惑的名字！）。

只需将html中的<tr ng-repeat="fruit in basket | filter:{isJuicy:type}">更改为：

filter

这里是fully functional jFiddle。

发生了什么：

isJuicy过滤器用于根据某种搜索参数过滤项目列表。它可以采用一个字符串，它只是搜索所有对象的所有属性进行过滤，或者它可以采用一个对象文字，可用于指定要搜索的字段

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

现在$index只会打扰匹配的项目，因此{{1}}会按预期增加。

表中的$ index，不是顺序的... angularjs

1 个答案:

发生了什么：