Question

当我从控制器更新滑块的ng-repeat数据时，我没有获得带有更新数据的光滑轮播。

<slick lazyLoad=ondemand init-onload=true slides-to-show=5 slides-to-scroll=1 next-arrow=".rightOne" prev-arrow=".leftOne" data="trailersUpcomming">
  <div index="$index " ng-repeat="trailer in trailersUpcomming ">
      <div class=" boxhover testimonialslider" style="margin-right: 12px; ">
          <div class="card " style="border-color: green; ">
              <div style="padding: 17px;text-align: left;height: 124px;background-color: #ffffff;">
                  <div>ReleaseDate : {{trailer.releasedate}}</div>
                  <div>Language : {{trailer.filmlanguage}}</div>
                  <div>Rating : {{trailer.filmrating}}</div>
              </div>
          </div>
      </div>
  </div>
</slick>

Answer 1

尝试使用angular.copy

更新阵列范围

供参考，请参阅此示例angular slick update example

Answer 2

您正在更新数据的地方只需使用

$timeout(function(){
 //update your variable here.
}

Answer 3

我也遇到过类似的问题。使用angular的旧版本，即1.4，并使用滑块轮播。在刷新/页面重新加载时，轮播未更新最新数据。

$('.slider').slick('reinit'); or $('.slider').slick('refresh'); 
did not work me so I had to play with data coming from server into angular client.

没有很好的解决方案，但是对我有用。我观察到的是，如果在页面重新加载时其引用发生更改，则用于在轮播上迭代和显示其中元素的数组将不起作用。如果您不直接将数据数组分配给其元素显示在Carousel上的目标数组，那么它将起作用。

为此，我正在使用数组的Push（）方法

for (let i=0; i < data.length ; i++) {
   var id = vm.targetArray.length + 1;
   if ( vm.targetArray.filter(item=> item.name == data[i].name).length == 0){
      vm.targetArray.push(data[i]);
      console.log("Pushed the item to targetArray : " + data[i].name);
   } 
}

ng-repeat for carousel：数据未更新或刷新

3 个答案: