angularjs: how does $index work in ng-repeat ?

Question

consider the following table :

 <tbody data-ng-repeat="job in jobs">
    <tr>
        <td>{{job.fileName}}</td>  
        <td>
            <button class="btn" ng-click="deleteJob($index);"><i class="icon-delete"></i>&nbsp; delete</button>
        </td>
    </tr>
</tbody>

if I delete a job, the row id is passed to the function and it works just fine.

 scope.deleteJob = function (id) {
                scope.jobs.splice(id, 1);
            }

However if I change deleteJob($index) to deleteJob({{$index}}) then, the index is still passed to the function, however if I delete row 1, the index of row 2 remains 2 and it is not updated.

How come ? What's the difference between the two approaches ?

Can you setup a plunker?

Stewie
– Stewie

2013-10-14 12:21:00 +00:00
Commented Oct 14, 2013 at 12:21 — Stewie
– Stewie, Commented Oct 14, 2013 at 12:21

FirstCape · Accepted Answer · 2014-05-12 15:27:07Z

5

It's because when you use $index it's a variable but when you use {{$index}} value used instead of variable.

If you check the DOM you will see that in the first case($index) you still see $index in DOM, but when you use {{$index}} you will see 0,1,2... in the DOM.

If you use {{index}}, when array is changed your DOM will still have have deleteJob(0),deleteJob(2) ... and so on - missing the deleted indices.

if you use $index your DOM will have $index, which is a variable that represents actual current index.

edited May 12, 2014 at 15:27

FirstCape

63913 silver badges30 bronze badges

answered Oct 14, 2013 at 12:25

Quad

1,7181 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxim Shoustin · Accepted Answer · 2013-10-14 12:38:57Z

1

I think {{$index}} is wrong aproach and valid usage of iterator offset of the repeated element must be $index.

$index is iterator and after delete one of items should be updated respectively.

When we write {{$index}} means - show current value stored in iterator.

Like in other languages, Java for example, if we run in loop over list (like ng-repeat) we can only use iterator to remove Item to prevent index issues

Demo Fiddle

edited Oct 14, 2013 at 12:38

answered Oct 14, 2013 at 12:25

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Collectives™ on Stack Overflow

angularjs: how does $index work in ng-repeat ?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related