Angular-slick ng-repeat $http get

Question

整个周末我都在尝试使用 ng-repeat 在光滑的 angular 轮播中显示数据（我用 $http.get 获取），但徒劳无功...

我读到了一个众所周知的问题：here and here。

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

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 文件中定义，我使用 yeoman 搭建我的项目）

如果你能帮助我就太好了。

Answer 1

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

标记

<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

我使用标准的 slick carousel，而不是 angular 版本。您只需等待 angular 完成数据加载。 1秒或更少是可以的例如

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

Angular-slick ng-repeat $http get

Angular-slick ng-repeat $http get

javascript

angularjs

ng-repeat

angularjs-ng-repeat

angular-ng-if