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!