How to obtain previous item in ng-repeat?

Question

I have a template in which I want to generate some HTML only if the current item has some different fields from the previous item. How can I access the previous item in an ng-repeat?

score 104 · Accepted Answer · edited May 11 '15 at 02:15

104

You can do something like

<div ng-app="test-app" ng-controller="MyController">
    <ul id="contents">
      <li ng-repeat="content in contents">
          <div class="title">{{$index}} - {{content.title}} - {{contents[$index - 1]}}</div>
      </li>
    </ul>
</div>

JS

var app = angular.module('test-app', []);

app.controller('MyController', function($scope){
    $scope.contents=[{
        title: 'First'
    }, {
        title: 'Second'
    }, {
        title: 'Third'
    }]
})

Demo: Fiddle

Be careful: $index is for the directive array, which may be different than the scope array. Use an inline variable to access the correct array.

<li ng-repeat="content in (correctContents = (contents | orderBy:'id'))">
  {{ correctContents[$index - 1] }} is the prev element
</li>

If you filter or orderBy, contents[$index] != content.

edited May 11 '15 at 02:15

AJcodez

31,780
20
84
118

answered Mar 14 '13 at 15:20

Arun P Johny

384,651
66
527
531

3

But if i have filter in ng-repeat, the collections will have differences. Any ideas? – VadimAlekseev May 17 '13 at 11:15
23

@VadimAlekseev You can do something like this to reference your filtered data: `ng-repeat="item in (filteredData = (data | filter:term))"` and do like in the answer of @arun-p-johny with `filteredData[$index-1]` instead of `contents[$index-1]` – jpmorin Sep 11 '13 at 16:44
My collection is a dictionary, I can't access items by index, is there any way to do this? :S – A. Matías Quezada Feb 04 '14 at 18:30
@a-matías-quezada It is fairly simple to dynamically convert your object into an array via a filter. see http://stackoverflow.com/questions/19387552/angular-cant-make-ng-repeat-orderby-work/19387871#19387871. Then you can use jpmorin's comment to access your data. – antoine Feb 12 '15 at 21:45
Here is a fiddle [link](http://jsfiddle.net/r9yej5w0/) showing what @jpmorin suggested in action – Joel Mar 23 '22 at 18:44

score 11 · Answer 2 · answered Mar 14 '13 at 15:19

One way is to use the $index for targeting previous item:

HTML:

<div ng-repeat="item in items">
  <span>{{$index}}: </span>
  <span ng-show="items[$index-1].name=='Misko'" ng-bind="item.name"></span>
</div>

JS:

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.items = [
          {name: 'Misko'},
          {name: 'Igor'},
          {name: 'Vojta'}
        ];

      }
    ]
  );

Plunker

score 6 · Answer 3 · answered Oct 12 '15 at 13:45

6

Why not using key from ng-repeat ? ($index seems tricky compared to key)

<div ng-repeat="(key, item) in data">
  <p>My previous item is {{ data[key-1] }}, my actual item is {{ item }}
</div>

answered Oct 12 '15 at 13:45

mpgn

7,121
9
67
100

score 0 · Answer 4 · answered Jun 21 '18 at 13:11

0

<li ng-repeat="item in items">
    {{items[$index - 1].att == item.att ? 'current same as previous' : 'current not same as previous'}}
</li>

answered Jun 21 '18 at 13:11

Ahmed

1,666
17
23

I am sorry, I don't see it as an improvement over any existing answer. – Munim Munna Jun 21 '18 at 14:24
2

Agreed. This answer isn't going to help anyone without an explanation of why they should use this approach over the answer with 91 upvotes. It may be a big improvement (I'm no expert in angularjs) but without an explanation, no one is ever going to see that – divibisan Jun 21 '18 at 14:54

How to obtain previous item in ng-repeat?

4 Answers4

Linked