CODEWITHSUNDEEP
angularjs
Uladz Kha
Uladz Kha

Reputation: 2364

How to displays all photos from album using AngularJS?

I have an AngularJs application with photo albums, at the first step i load all photos from server when user come to site:

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

At the AlbumsPage.html i display title and cover of album:

<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>

after click to title of album i send id of clicked album to followToAlbum(itm.id) method where i get all photos and redirect to album page:

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

i get all photos of album by id but it doesn't dipslay. enter image description here

I created at the empty $scope.AllPhotosOfSingleAlbum im my controller:

$scope.AllPhotosOfSingleAlbum = [];

Here the source code of my method where i get photos of album:

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;
    }

Maybe somebody knows how i can resolve it ? Thanks for your answers !

Upvotes: 0

Views: 164

Answers (1)

hurricane
hurricane

Reputation: 6734

You just need to define a new ng-repeat for photos. When AllPhotosOfSingleAlbum changes photos will be opened.

Add these to your 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>

Upvotes: 1

Related Questions