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

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/

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

(请你评论/评价我的问题的描述清晰度,(容易理解吗？)欢呼!)

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

Answer 1

问题是您正在使用ng-show显示或隐藏单个项目.实际上,$index正确计算项目的数量 - 只是有些是隐藏的,所以你无法看到这些值.

如果仔细查看您的示例,您会看到这些$index值与相关项目的原始索引相匹配.

相反,你想要做的是使用过滤器在呈现之前过滤列表filter(是的,它确实令人困惑地命名!).

只需将您tr的html 更改为:

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

这是一个功能齐全的jFiddle.

发生了什么:

该filter过滤器是用来过滤对某种搜索参数的项目清单.它可以采用一个字符串,它只是搜索要过滤的所有对象的所有属性,或者它可以采用一个对象文字,可用于指定要搜索的字段.

在这种情况下,我们要求它的基础上哪些项目有一个参数来筛选列表isJuicy是当前值相匹配type,这是在范围之内.

现在,ng-repeat只会在匹配的项目上循环,因此$index将按预期增加.