Loaded images are not visible

@Costa_Rassco wrote:

Hello, guys.

I want to try to create a gallery, where an object with img src properties is loaded from the server.

Everything loads fine, but I can see images only via chrome's tool "Check element"

They are just no visible at all

Here is an app.js:

     angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

      .run(function($ionicPlatform) {

     $ionicPlatform.ready(function() {

     if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
     }

   if(window.StatusBar) {
     StatusBar.styleDefault();
    }
 });

})

.config(function($stateProvider, $urlRouterProvider) {

 $stateProvider

 .state('main', {
   url: "/main",
   templateUrl: "templates/main.html",
   controller: 'ImagesDashCtrl'
 });

 $urlRouterProvider.otherwise('/main');
});

Here is the controller.js:

angular.module('starter.controllers', [])

          .controller('ImagesDashCtrl', function($scope, myImages) {

            $scope.images = [];
            $scope.loaded = false;

              myImages.getDownloadedImages().then(
                function(images) {

                  $scope.images = images;
                  $scope.loaded = true;
                  console.log('заполненный')
                },

                function(err) {

                  console.error(err);
                });

              console.log('пустой')
          });

Here is the services.js:

          angular.module('starter.services', [])

            .factory('myImages', function($http) {

              var myDownloadedImages = [];

              return {

                getDownloadedImages: function() {

                  return $http.get('http://www.test1.com').then(function(response) {
                              myDownloadedImages = response.data;
                              return myDownloadedImages;

                }
            });

and here is the main.html

        <ion-content>
            <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
                <div class="col col-25" ng-if="$index < images.length">
                    <img ng-src="{{images[$index]}}" width="100%" ng-show="{{ loaded }}">
                </div>
                <div class="col col-25" ng-if="$index + 1 < images.length">
                    <img ng-src="{{images[$index + 1]}}" width="100%" ng-show="{{ loaded }}">
                </div>
                <div class="col col-25" ng-if="$index + 2 < images.length">
                    <img ng-src="{{images[$index + 2]}}" width="100%" ng-show="{{ loaded }}">
                </div>
                <div class="col col-25" ng-if="$index + 3 < images.length">
                    <img ng-src="{{images[$index + 3]}}" width="100%" ng-show="{{ loaded }}">
                </div>
            </div>
        </ion-content>

Thank you in advance)

Good luck!

Posts: 1

Participants: 1

Read full topic