$index+1 in Knockout foreach binding

Question

I need to display $index+1 in a table.

If I just use the $index all the elements will start from 0, I need to start at 1.

Here's the documentation of knockout: http://knockoutjs.com/documentation/foreach-binding.html

In there you can find this example:

<h4>People</h4>
<ul data-bind="foreach: people">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click: addPerson">Add</button>

So it will display the following:

People

Name at position 0: Bert Remove

Name at position 1: Charles Remove

Name at position 2: Denise Remove

I really need this to be just for display purposes.

Name at position 1: Bert Remove

Name at position 2: Charles Remove

Name at position 3: Denise Remove

I tried this without success <span data-bind="text: ($index + 1)"> </span>

possible duplicate of [Knockout is not evaluating an expression when using $index in a binding](http://stackoverflow.com/questions/11302338/knockout-is-not-evaluating-an-expression-when-using-index-in-a-binding) — nemesv, Jul 19 '13 at 04:42

Damien · Accepted Answer · 2013-07-18T21:55:26.933

133

$index is an observable. So you need to use it this way :

<span data-bind="text: ($index() + 1)"> </span>

edited Jul 18 '13 at 21:55

answered Jul 18 '13 at 21:43

Damien

8,889
3
32
40

score 1 · Answer 2 · edited May 23 '17 at 12:25

1

I found the answer here: Knockout is not evaluating an expression when using $index in a binding

In order to use it <span data-bind="text: $index() + 1"></span>

edited May 23 '17 at 12:25

Community

1
1

answered Jul 18 '13 at 21:44

Sanchitos

8,423
6
52
52

$index+1 in Knockout foreach binding

2 Answers2

Linked