Angular -slick ng-repeat $ http get

Question

I tried the whole end of the week to display the data (which I get with $http.get ) in an angular carousel using ng-repeat , in vain ...

I read about a well-known issue: here and here .

I tried using the init-onload and data attributes, in vain ...

HTML:

 <div ng-controller="LandingCtrl as ctrl"> ... <slick init-onload=true data="ctrl.products"> <div ng-repeat="product in ctrl.products"><img src="{{product.image}}" alt="{{product.title}}"></div> </slick> ... </div> 

JS:

 angular.module('myApp') .controller('LandingCtrl',['$http', function($http){ var store = this; store.products = []; $http.get('products.json') .success(function(data){ store.products = data; console.log(data); //display the json array }); }]); 

( myApp module is defined in my app.js file, I used yoman to develop my project)

It would be great if you could help me.

Answer 1

I suggest you use the ng-if on slick element. This will load the slick directive only when data is present only by checking the length of the data.

Markup

 <slick ng-if="ctrl.products.length"> <div ng-repeat="product in ctrl.products"> <img ng-src="{{product.image}}" alt="{{product.title}}"/> </div> </slick> 

Answer 2

I use a standard carousel, not angular. You just need to wait for angular to finish loading the data. 1 second or less is ok Example

 setTimeout( function() { $('#yourdiv').slick({ autoplay: true }) }, 1000);