AngularJS - How to access to the next item from a ng-repeat in the controller

Question

I'd like to access to the parameters of the next item on screen when clicking on a button.

I use a ng-repeat in my html file:

<li ng-repeat="item in items | filter:query" ng-show="isSelected($index)">
    <a href="" ng-click="itemNext()"><img src="xxx.jpg" /></a>
</li>

And the index in my Controller with a loop:

$scope.itemNext = function () {
    $scope._Index = ($scope._Index < $scope.nbItems - 1) ? ++$scope._Index : 0;
    $scope.functionToCallWithNextItem(nextItem.param1);
};

A simple $scope.items[$scope._Index].param1 instead of nextItem.param1 wouldn't work as the data is filtered so $index+1 from $scope.items isn't necessarily the good one.

Any idea ?

Answer 1

You can assign your filtered data to a variable:

<li ng-repeat="item in (filteredItems = (items | filter:query))">

Then use $index + 1 to get the next item:

<a ng-click="itemNext(filteredItems[$index + 1])">

Demo: http://plnkr.co/edit/OdL5rIxtTEHnQCC3g4LS?p=preview

Answer 2

It's simpy that

<div ng-repeat="item in items">
     current: {{item.value}}
     next: {{ items[$index + 1].value}}
     previous: {{ items[$index - 1].value}}
</div>