I have the ion-slide-box in the first view of my app, and it just open when i enter in other view and return to the first view, after that it work because i think the ion slide is in the cache. The images is loaded from JSON, someone knows what is wrong or what I need to do?
.controller('PlaylistsCtrl', function($scope, $http) {
$http.get("http://scabandblastofwheat2016.org/mobile/ImageSlide.json")
.success(function (response)
{
$scope.names = response;
});
})
<div id="slide">
<ion-slide-box style="width:80%; height:30%;" auto-play="true" show-pager="true">
<ion-slide ng-repeat="x in names|orderBy:'Name'">
<img style="width:100%;" ng-src="{{x.Name}}" alt="" />
</ion-slide>
</ion-slide-box>
</div>
Related
I'm trying to load images from my json file into my application but i cannot get it to work:
Here's my code:
js:
.controller('photoCtrl', function($scope, $ionicModal, $ionicBackdrop, $ionicScrollDelegate, $ionicSlideBoxDelegate, $http) {
$scope.images = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/37ia6')
.success(function(data) {
$scope.images = data.images;
})
}
html:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" >
<ion-content ng-init="getImages()" class="center" class="has-header padding">
<!-- start Under6/7/8/9s Photos -->
<div class="item item-divider">
<i class="ion-images"></i> Under6/7/8/9s Photos
</div>
<a class="item item-list-detail">
<ion-scroll direction="x">
<img on-hold="onHold()" ng-repeat="image in images" ng-src="{{images.src}}" ng-click="showImages($index)" class="image-list-thumb" />
</ion-scroll>
</a>
</ion-content>
</ion-view>
I think the reason is in your JSON. What would you expect to happen when iterating over:
{"images":"http://cdn.caughtoffside.com/wp-content/uploads/2012/07/Marko-Marin.jpg"}
Probably your API should return an array of objects like
[{"src":"http://cdn.caughtoffside.com/.../Marko-Marin.jpg"},
{"src":"http://cdn.caughtoffside.com/.../Johnny-Blue.jpg"},
...
]
Iterating over an object usually looks different:
<div ng-repeat="(key, value) in myObj">
Try this:
<ion-scroll direction="x" ng-repeat="image in images">
<img on-hold="onHold()" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb" />
</ion-scroll>
I'm trying to load a image from a HTTP.GET into my application. I'm unsure why the picture isn't loading.
Here is my code:
Html:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl">
<ion-content class="center" ng-init="getImages()">
<div class="item item-divider">
<i class="ion-images"></i> Under6/7/8/9s Photos
</div>
<a class="item item-list-detail">
<ion-scroll direction="x">
<img on-hold="onHold()" ng-repeat="image in images" ng-src="images" ng-click="showImages($index)" class="image-list-thumb" />
</ion-scroll>
</a>
</ion-content>
</ion-view>
Javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.data = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/1jovy')
.success(function(data) {
$scope.data = data;
})
}
});
Add your photoCtrl controller to your view
I saw ng-repeat="data in data", here item and collection is having same name, which is not a good practice....
If I am rewiting this as ng-repeat="img in data" then your ng-src will be like
ng-src="{{img}}"
updated CODEPEN
I'm trying to create an ionic application which uses a gallery. I'm unsure why my image isn't being loaded into the application.
What i'm trying to develop is an gallery which loads the images from a JSON file.
Here's my HTML
<ion-view view-title="Gallery" align-title="center">
<ion-content ng-controller="photoCtrl" ng-init="getImages()">
<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="{{data.images[$index].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img ng-src="{{data.images[$index + 1].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img ng-src="{{data.images[$index + 2].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img ng-src="{{data.images[$index + 3].src}}" width="100%" />
</div>
</div>
</ion-content>
</ion-view>
Javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.images = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = images;
})
}
});
I have also created a codepen: http://codepen.io/beefman/pen/eNMgzG
The JSON API return an associative array (key-value pair) like this:
{"images":"http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg"}
but your template code expects an array (list):
data.images[$index].src
so I would start by matching your JSON with the format expected by your template.
Edit: Here's a JSON format that would match your template's expectations:
{'images': [{'src': 'url1'}, {'src': 'url2'}]}
Also, make sure to set the images variable properly in your callback
$scope.images = data.images
now $scope.images is a list of key value pairs
with ng-repeat you can display the images like so:
<div ng-repeat="image in images">
<img ng-src="image.src" />
</div>
Your controller should be like this
.controller("photoCtrl", function($scope, $http) {
$scope.images = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.images = data;
})
}
});
I'm creating a mobile application using the framework ionic which is built on AngularJS.
I'm trying to load an image into my application from a JSON file but I cannot get it to load correctly.
Could anybody help me out?
Here's my HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25" ng-repeat="image in images">
<img ng-src="{{images}}" width="100%" />
</div>
</ion-content>
</ion-view>
Here's my javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.data = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = data;
})
.error(function() {
alert("Not working");
});
};
});
There are several issues here. First, your API call returns an object with a single property called images (not an array). Second, you're not accessing it in your HTML because that would be {{ data.images }} since your $scope member is called data.
So, the first thing you need to do is have the API return an array. If you do that, then use this HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25" ng-repeat="image in data.images">
<img ng-src="{{image}}" width="100%" />
</div>
</ion-content>
</ion-view>
And this JavaScript:
.controller("photoCtrl", function($scope, $http) {
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = data;
})
.error(function() {
alert("Not working");
});
};
});
If you only want your API to return one image then it's as simple as this for the HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25">
<img ng-src="{{ data.images }}" width="100%" />
<!-- data.images because that's the name returned by the API call -->
</div>
</ion-content>
</ion-view>
The JavaScript doesn't need to change from what I have above;
Please change
<img ng-src="{{image}}" width="100%" />
instead of
ng-src="{{images}}"
I wonder if i could get a little help here. I am trying to build a small image gallery using AngularJS and Laravel. So far everything is working out great. The problem I am having however is when I dynamically load one of my HTML files, the ng-click directive does not seem to work on the dynamic content. I have looked into this and came across the $compile option, but I cannot for the life of me see how I can implement it.
Any one have any idea of what I need to do? I have attached the code I am working with below:
Controller Code
App.controller('MyPhotos', function ($scope, $timeout, $http, $document, $modal, $log, $sce, $compile) {
$scope.loadAlbums = function () {
$scope.loading = "<div class='text-center'><strong>...Loading...</strong></div>";
$scope.isLoading = true;
$http({
method: 'GET',
url: '/my/photos/fetch/albums'
}).success(function (data) {
var htmlContent = $compile(data.albums)($scope);
$scope.galleryContent = $sce.trustAsHtml(data.albums);
$log.log(data.albums);
$scope.isLoading = false;
}).error(function (data, status, headers, config) {
//$scope.progress = data;
$scope.messages = 'There was a network error. Try again later.';
//$log.error(data);
$scope.isLoading = false;
});
};
Base Html Page
<div class="row">
<div class="col-md-12">
<ul class="list-inline">
<li>Your Photos</li>
<li>Your Albums</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div ng-show="isLoading" class="text-center">
<img src="{{ Theme::asset()->url('img/loading_balls.gif') }}" />
</div>
<div class="photoContainer" data-ng-bind-html="galleryContent">
[[ galleryContent ]]
</div>
</div>
</div>
Dynamically loaded HTML
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/700x400" alt="" class="img-responsive" />
<span class="fa fa-plus"></span> Create album
</div>
#foreach($albums as $album)
<div class="col-md-3">
<img src="http://placehold.it/700x400" alt="" class="img-responsive" />
<a href="#" data-ng-click="loadAlbum({{ $album->id }})" title="{!! $album->title !!}"
data-album-id="{{ $album->id }}">{!! $album->title !!}
</a>
<p> </p>
</div>
#endforeach
The data-ng-click directive is not working when the content is loaded dynamically.
Thanks
You can do this similarly in a much simpler way, using ngInclude:
<div class="photoContainer" ng-include="'/my/photos/fetch/albums'">
<img src="{{ Theme::asset()->url('img/loading_balls.gif') }}" />
</div>
See https://docs.angularjs.org/api/ng/directive/ngInclude