Wie werden alle Fotos aus dem Album mit AngularJS angezeigt?

Question

Ich habe eine AngularJS Anwendung mit Fotoalben, im ersten Schritt i alle Fotos vom Server geladen werden, wenn der Benutzer auf Seite kommen:

logicOfMyApp.getPhotosFromServerFunc().then(function (photos) { 
    if (photos.length != 0) { 
     $scope.photosArray = photos; 
     console.log($scope.photosArray); 
    } 
}); 

Am AlbumsPage.html i angezeigt werden Titel und Cover des Albums:

<div class="col-md-3" ng-repeat="itm in albumsArray"> 
    <a ng-click="followToAlbum(itm.id)" href=""> {{itm.title}}</a><br /> 
    <img ng-src="../Files/{{itm.pathToCover}}" width="250px" height="160px" class="img-rounded" /> 
</div> 

nach Klick auf Titel des Albums i id geklickt Albums followToAlbum(itm.id) Methode schicken, wo ich alle Fotos erhalten und zu Album-Seite umleiten:

$scope.followToAlbum = function (id) { 
    $scope.AllPhotosOfSingleAlbum = logicOfMyApp.getPhotoOfAlbumFunc($scope.photosArray, id); 
    console.log($scope.AllPhotosOfSingleAlbum); 
    $location.path('/albums/' + id); 
}; 

ich bekomme alle Fotos von Album von ID, aber es geht nicht dipslay.

ich auf dem leeren $ scope.AllPhotosOfSingleAlbum erstellt meinen Controller IM:

$scope.AllPhotosOfSingleAlbum = []; 

Hier ist der Quellcode meiner Methode, wo ich Fotos von Album bekommen:

getPhotoOfAlbumFunc: function (photosArray, albumIdRoute) { 
     var allPhotosOfAlbum = []; 
     for (var i = 0; i < photosArray.length; i++) { 
      if (photosArray[i].albumId == albumIdRoute) { 
       allPhotosOfAlbum.push(photosArray[i]); 
      } 
     } 

     return allPhotosOfAlbum; 
    } 

Vielleicht jemand weiß Wie kann ich es lösen? Danke für deine Antworten !

Answer 1

Sie müssen nur eine neue ng-Wiederholung für Fotos definieren. Wenn AllPhotosOfSingleAlbum ändert, werden die Fotos geöffnet.

Fügen Sie diese zu Ihrem HTML-Code:

<div class="col-xs-12 photos-area"> 
    <div class="col-xs-4 photo-area" ng-repeat="photo_item in AllPhotosOfSingleAlbum"> 
     <img ng-src="../Files/{{photo_item.path}}" width="250px" height="160px" class="img-rounded" /> 
    </div> 
</div>