How do I synchronize objects of the same Array , with the index on different pages?

[ThiagoJem]

Hi, I put the images on different pages using the ng-repeat and the custom filter | filterBy : [ 'id '] , ' ' " , only just the image of the first object in the array of the list is expanded correctly , the other I need go adding +1 , +2 , +3 and successively. The third object in the array only magnifies the image properly if I add ($index+2) , eg .

 $scope.Images = 
[
   { id="1", url: "/images/img-1.jpg", src: "/images/img-1.jpg" },
   { id="2", url: "/images/img-2.jpg", src: "/images/img-2.jpg" },
   { id="3", url: "/images/img-3.jpg", src: "/images/img-3.jpg" } 
];

The object that is the first in Array $ scope.images list functions normally

 <div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '1'">
   <a ng-click="openLightboxModal($index)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

The object that is second on the list of Array $ scope.images only works if I add +1 to $ index

<div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '2'">
   <a ng-click="openLightboxModal($index+1)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

The object that is third on the list of Array $ scope.images only works if I add +2 at $ index

<div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '3'">
   <a ng-click="openLightboxModal($index+2)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

I wonder if this directive works by placing the images (objects) , the same array, in different pages , if so, how could do it ?

Thanks.

[compact]

In each ng-repeat, the $index starts at 0. To get the correct index in your images array, you can use the image id instead:

<div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '3'">
   <a ng-click="openLightboxModal(image.id - 1)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

This assumes your ids are always ordered like 1, 2, 3, 4, 5, ...

[ThiagoJem]

I use in decreasing order ...,5 , 4, 3 , 2, 1 .Organizei in ascending order to facilitate understanding. 're Almost working, need your help to complete this task.

[compact]

Try changing your controller method to find the array index based on the given image object:

$scope.openLightboxModal = function (image) {
  Lightbox.openModal($scope.images, $scope.images.indexOf(image));
};

Pass in the image:

<div ng-controller="QuadrinhosCtrl">
 <div ng-repeat="image in images | filterBy: ['id']: '3'">
   <a ng-click="openLightboxModal(image)" title="Ampliar Imagem">
    <img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
    </a>
 </div>
</div>

[ThiagoJem]

It worked perfectly fine. Thank you for excellent help , I will be promoting his work. hug!