$指数表，不连续的... angularjs [英] $index, in Table, not sequential... angularjs

问题描述

我在HTML中的表。

I have a table in HTML.

中的行数（通过使用 $指数的），只有的某些行的显示（通过使用 NG-节目） 。

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

问题：$指数不返回正确的计数。该表的计数应该去像1,2,3 ......，但事实并非如此。

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>

下面是在的jsfiddle ;不要忘记点击按钮看问题：
http://jsfiddle.net/f6HCX/2/

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?

的（你能不能也请评论/率，我的问题的描述清晰，（这是很容易理解？）干杯！）的

编辑：
这个问题已经有了答案。使用过滤器的更多信息：<一href=\"http://stackoverflow.com/questions/11996857/how-to-use-parameters-within-the-filter-in-angularjs\">How在angularjs过滤器中使用的参数？

推荐答案

现在的问题是，你正在使用 NG-节目来显示或隐藏单个项目。在现实中， $指数正确计算项目的数量 - 这只是有些是隐藏的，所以你不能看到这些值

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!).

只要改变你的 TR 在html看起来像：

Just change your tr in the html to look like:

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

下面是一个全功能jFiddle 。

的过滤器过滤器是用来过滤对某种搜索参数的项目清单。它可以采取一个字符串，这将只需搜索的所有的所有的对象的属性来筛选上，也可以把对象文本可用于指定字段进行搜索

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.

在这种情况下，我们要求它在此基础上的项目有一个参数来筛选列表 isJuicy 的的当前值类型相匹配，这是在范围之内。

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.

现在的 NG-重复只会打扰遍历匹配的项目，因此 $指数将递增如预期。

Now the ng-repeat will only bother looping over the matched items, and therefore the $index will increment as expected.

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