Hi I am using kenwheeler slick carousel but when I use ng-repeat on the div i get `listed images'.
What I a doing wrong here ?
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</section>
I tried the solutions provided here angular slick although its different but still no proper images are being displayed. without ng-repeat it works perfect.
The output is something like this image
My controller
$scope.single_product = function (product_id) {
$http.get('abc',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000
});
})
.error(function (data) {
console.log(data);
});
};
I am including slick.css slick-theme.css and slick.jshere is the link to all Files
Instead of src Use ng-src ng-src use to get the path of image in angularJS
Go through this link carefully and apply styles
http://kenwheeler.github.io/slick/
remove div that contains ng-repeat
<section class="regular slider" style="clear: both" ng-if="slides">
<img ng-repeat="slide in slides" ng-src="{{slide.path}}">
</section>
Use ng-src
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
$scope.slides = [{
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img ng-src="{{slide.path}}">
</div>
</section>
</div>
Try this:
<div ng-repeat="slide in slides">
<img ng-src="slide.path">
</div>
Check angular-slick README and include all css and js. Add slick to your angular.module [ let say MyApp ] dependency and use slick directives. I think you missed to use slick directives.
<section class="regular slider" style="clear: both" ng-if="slides">
<slick slides-to-show=3 slides-to-scroll=3>
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</slick>
</section>
Related
For some reason I am not able to see, my Carousel will not appear. My project requires slightly different implementation than what is defined here. It should work fine though, I've outlined the details below.
Clicking my button toggles openModal, where I specify my scope as modal:
openModal() {
var _this = this;
this.$uibModal.open({
animation: true,
templateUrl: 'components/directives/modals/Modal/Modal.html',
controller: 'ModalController',
controllerAs: 'modal',
size: 'lg',
}
});
}
In this controller I declare some variables in the constructor:
//Carousel Variables
this.active = 0;
this.currIndex = 0;
this.slides = [];
this.addSlide();
This calls my controller function addSlide:
addSlide() {
for (var i=0;i<4;i++) {
this.slides.push({
image: 'https://unsplash.it/600/300',
text: ['Getting Started', 'Awesome photograph', 'That is so cool', 'I love that'][this.slides.length % 4],
id: this.currIndex++
});
}};
HTML
<div style="height: 200px;">
<div uib-carousel active="modal.active" interval="0" no-wrap="false">
<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
<img ng-src="{{modal.slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{modal.slides.id}}</h4>
<p>{{modal.slides.text}}</p>
</div>
</div>
</div>
</div>
Change your markup from...
<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
<img ng-src="{{modal.slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{modal.slides.id}}</h4>
<p>{{modal.slides.text}}</p>
</div>
</div>
...to this...
<div uib-slide ng-repeat="slide in modal.slides" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>">
By including the modal. in there you are referencing a non-existent slide property on the controller when what you really want is to reference the slide object in your ng-repeat. (You also had slides in a couple places where I think you meant slide).
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 am trying to ng-include inside a ng-repeat. But nothing happens. If I include it statically with the whole link it works. Also tried ng-src but also not working.
index.html
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div ng-include src="'/partials/slider/{{slide.image}}.html'"></div>
</div>
</div>
sliderCtrl.js
MyApp.controller('sliderCtrl', function ($scope) {
$scope.slides = [
{image: '01', description: 'Image 00'},
{image: '02', description: 'Image 01'},
{image: '03', description: 'Image 02'}
];
});
console
Error: [$interpolate:noconcat] http://errors.angularjs.org/1.3.15/$interpolate/noconcat?p0='%2Fpartials%2Fslider%2F%7B%7Bslide.image%7D%7D.html'
at Error (native)
at http://192.168.33.77/bower_components/angular/angular.min.js:6:417
at g (http://192.168.33.77/bower_components/angular/angular.min.js:88:436)
at Oa (http://192.168.33.77/bower_components/angular/angular.min.js:68:208)
at X (http://192.168.33.77/bower_components/angular/angular.min.js:53:397)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:51:428)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:52:95)
at D (http://192.168.33.77/bower_components/angular/angular.min.js:49:467)
at fa (http://192.168.33.77/bower_components/angular/angular.min.js:61:43)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:51:465) <div ng-view="" class="page ng-scope">
Thanks in advance!
Instead of:
<div ng-include src="'/partials/slider/{{slide.image}}.html'"></div>
Use this:
<div ng-include src="'/partials/slider/' + slide.image + '.html'"></div>
Try using data-ng-include data-src:
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div data-ng-include data-src="'/partials/slider/{{slide.image}}.html'"></div>
</div>
</div>
You forgot to escape the inner quotes:
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div ng-include src="\'/partials/slider/{{slide.image}}.html\'"></div>
</div>
</div>
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