$index，在表中，不是连续的...... angularjs [英] $index, in Table, not sequential... angularjs

问题描述

我有一个 HTML 表格.

计算行数(通过使用$index)，并且只显示某些行(通过使用ng-show).

问题:$index 没有返回正确的计数.表的计数应该类似于1,2,3..."，但事实并非如此.

 <tr ng-repeat="水果在篮子里" ng-show="fruit.isJuicy == type"><td>{{$index + 1}}</td><td>{{fruit.Name}}</td></tr></tbody>

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

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

(能否请您评论/评价我的问题的描述清晰度，(是否容易理解?)干杯！)

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

解决方案

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

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

相反，您要做的是使用 filter 过滤器(是的，它真的令人困惑)在它被渲染之前过滤列表命名！).

只需将 html 中的 tr 更改为:

功能齐全的jFiddle.
发生了什么:
filter 过滤器用于根据某种搜索参数过滤项目列表.它可以采用一个字符串，它会简单地搜索 all 对象的 all 属性以进行过滤，或者它可以采用一个对象字面量，用于指定要搜索的字段.
在这种情况下，我们要求它根据哪些项目具有与 type 的当前值匹配的参数 isJuicy 来过滤列表，该参数位于范围.
现在 ng-repeat 只会遍历匹配的项目，因此 $index 将按预期递增.
I have a table in HTML. 

The rows are counted (via use of $index), and only certain rows are shown (via use of ng-show). 

Problem: $index does not return the right count. The table's count should go like "1,2,3...", but it does not. 
    <tbody>
        <tr ng-repeat="fruit in basket" ng-show="fruit.isJuicy == type">
            <td>{{$index + 1}}</td>
            <td>{{fruit.Name}}</td>
        </tr>
    </tbody>
Here's the JSFiddle; don't forget to click on the buttons to see the issue: 
http://jsfiddle.net/f6HCX/2/

What is causing this counting problem? How can it be solved?

(Could you please also comment/rate my question's description clarity, (was it easily understood?) cheers!)

Edit:
This question has been answered. More info with using filters: How to use parameters within the filter in AngularJS? 
解决方案
The problem is you are using ng-show to show or hide individual items.  In reality, the $index is correctly counting the number of items — it's just that some are hidden, so you can't see those values.
If you look closely at your example, you'll see that the $index values match up with the original index of the items in question.
Instead, what you want to do is filter the list before it gets rendered, using the filter filter (yes, it's really confusingly named!).
Just change your tr in the html to look like:
<tr ng-repeat="fruit in basket | filter:{isJuicy:type}">
Here's a fully functional jFiddle.
What's happening:
The filter filter is used to filter a list of items against some sort of search parameters.  It can take a string, which will simply search all properties of all objects to filter on, or it can take an object literal which can be used to specify which fields to search.
In this case, we've asked it to filter the list based on which items have a parameter isJuicy that matches the current value of type, which is in the scope.
Now the ng-repeat will only bother looping over the matched items, and therefore the $index will increment as expected.

                        
这篇关于$index，在表中，不是连续的...... angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！