1

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?

Community
  • 1
  • 1
daCoda
  • 3,583
  • 5
  • 33
  • 38

1 Answers1

6

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.

Community
  • 1
  • 1
OverZealous
  • 39,252
  • 15
  • 98
  • 100
  • Another neat trick: setting the filter to `""` allows you to show all items, which I added here: http://jsfiddle.net/eE3V8/2/ – OverZealous Jul 11 '13 at 03:34
  • One more: to show that it is all fully dynamic, try this fiddle: http://jsfiddle.net/c6q8z/ — you can dynamically toggle the state of the Banana. – OverZealous Jul 11 '13 at 03:40
  • Thanks. Just a quick question, what does the ":" mean in the filter? – daCoda Jul 11 '13 at 04:28
  • 1
    The first `:` separates the name of the filter from its argument. The second is part of the object literal. [Check out the docs](http://docs.angularjs.org/guide/dev_guide.templates.filters.using_filters) – OverZealous Jul 11 '13 at 04:40