角光滑NG-重复$ HTTP GET [英] Angular-slick ng-repeat $http get

问题描述

我一直在尝试所有的周末使用华而不实的角度转盘来显示数据（即我取 $ http.get ） NG-重复，白白...

I've been trying all the week end to display data (that I fetch with $http.get) in the slick angular carousel using ng-repeat, in vain...

我读过有关著名的问题：这里和< A HREF =htt​​ps://github.com/vasyabigi/angular-slick/issues/2相对=nofollow>这里。

I've read about the well known issue: here and here.

我试图使用的init-的onload 和数据属性，白白...

I tried to use 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 模块是我在 app.js 文件中定义，我用自耕农脚手架我的项目）

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

这将是巨大的，如果你能帮助我。

It would be great if you could help me.

推荐答案

我建议你使用 NG-如果在光滑元素。这只会负载光滑只有当数据为present只是通过检查数据长度的指令。

I'd suggest you to use ng-if on slick element. That will only load slick directive only when data is present just by checking length of data.

标记

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

这篇关于角光滑NG-重复$ HTTP GET的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！