Angular-slick ng-repeat $http get [英] Angular-slick ng-repeat $http get

问题描述

我整个周末都在尝试使用 ng-repeat 在光滑的角度轮播中显示数据(我使用 $http.get 获取)，在徒劳...

我已经阅读了一个众所周知的问题:这里和此处.

我尝试使用 init-onload 和 data 属性，但没有成功...

HTML:

...<slick init-onload=true data="ctrl.products"><div ng-repeat="ctrl.products 中的产品"><img src="{{product.image}}" alt="{{product.title}}"></div></slick>...

JS:

angular.module('myApp').controller('LandingCtrl',['$http', function($http){var store = this;store.products = [];$http.get('products.json').成功(功能(数据){store.products = 数据；控制台日志(数据)；//显示json数组});}]);

(myApp 模块定义在我的 app.js 文件中，我使用 yeoman 来搭建我的项目)

如果你能帮助我就好了.

解决方案

我建议你在 slick 元素上使用 ng-if.仅当数据存在时仅通过检查数据长度才加载 slick 指令.

标记

<div ng-repeat="ctrl.products 中的产品"><img ng-src="{{product.image}}" alt="{{product.title}}"/>

</slick>

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...

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

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 module is defined in my app.js file, I used yeoman to scaffold my project)

It would be great if you could help me.

解决方案

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.

Markup

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

这篇关于Angular-slick ng-repeat $http get的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！