Draz Draz - 4 months ago 29
AngularJS Question

Custom Image viewer. Simple image-gallery not shown after duplicating it, strange behavoir

I try to develop an Image-Viewer. I want to be able to add multiple galleries to contain the Images and it should be possible to 'duplicate' a Gallery. That's where I'm stuck right now.

I can add new galleries but cannot duplicate one. When duplicating, the Gallery is duplicated in my Array but does not get visual. When adding new galleries after that, they are not shown either.

I don't understand it at all.

Some code:

// Controller for binding galleries to view
app.controller('newMainCtrl', function($scope, ImageGalleriesService) {

$scope.galleries = ImageGalleriesService.getGalleries();

$scope.$watch(function(){
return ImageGalleriesService.getGalleries();
}, function(newVal){
$scope.galleries = newVal;
});

});

// Single Image controller
app.controller('imageCtrl', function($scope, ImageGalleriesService) {

$scope.imageinit = function(value)
{
$scope.imageitem = value;
};

});

// Gallery controller
app.controller('galleryCtrl', function($scope, ImageGalleriesService) {


$scope.init = function(gallery) {
$scope.gallery = gallery;
};

$scope.duplicate = function()
{
ImageGalleriesService.addImageGallery($scope.gallery, null, 2);
};



});

// Service that holds all the galleries
app.service('ImageGalleriesService', function() {

var imagegalleries = [];

this.getGalleries = function(){
return imagegalleries;
};

this.addImageGallery = function(imagegallery){

imagegalleries.push(imagegallery);
};

});


I made a plunker to Show the Problem.

Any help appreciated, thanks!

Answer

use track by $index in your html ng-repeat="gallery_ in galleries track by $index"

Comments