Synchronize objects, from the same Array, with the index of different pages

Question

Synchronize objects, from the same Array, with the index of different pages

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Use the angular-bootstrap-lightbox , which serves to show enlarged images by clicking on they.

I put the images on different pages, using ng-repeat and custom filter | filterBy: ['id']: ''" , only the image of the first object in the Array list is enlarged correctly, the rest I need to add +1, +2 , +3 and successively. The third object in Array only magnifies the image correctly if I add ($ index + 2), Ex:

$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 first in the Array $scope.images list works 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 second object in the Array list $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 in the Array list $scope.images only works if I add +2 in $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>

The default call to the directive, which is inserted into controller :

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

I tried some more ways I did not succeed, how to solve this problem?

javascript angularjs angularjs-directives

asked by anonymous 21.01.2015 / 00:47

2 answers

1

21.01.2015 / 02:01

Error compiling the project in Gradle Classic Sliding / Drag Slider

score 0 · Accepted Answer

I put the doubt in the github of the creator of the directive, he guided me, and started working round.

Change method to controller , to start looking for index of array based on objeto determined by image .

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

In this code snippet, you need to change the $index to 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>

Thanks to those who contributed and those who tried to help, thanks!