Slick Carousel Angular-動態數據加載

Question

當我使用動態數據加載平滑內容時，所有圖像都位於另一圖像之下。 我不知道為什么會這樣。 我該如何解決？ 看起來DOM本身需要數據。

視圖：

 <slick infinite=true slides-to-show=3 slides-to-scroll=3 settings="slickConfig" data="images"> <div class="slick-item" ng-repeat="image in images"> <div class="Slide-Id"> <p class="slide-id">{{images.indexOf(image)+1}}/{{images.length}}</p> </div> <img src="{{image.url}}" height="100px" width="100px" /> </div> </slick> 

 // $scope.images = [ { // url: '../../images/qr-code.png' // }, { // url: '../../images/qr-code.png' // }, { // url: '../../images/qr-code.png' // }, { // url: '../../images/qr-code.png' // }, { // url: '../../images/qr-code.png' // }]; //Hard coded values above loads properly as expected. But if it comes from server and then, //it loads one below the other. $scope.images = []; $scope.slickConfig = { //enabled: true, //autoplay: false, //draggable: true, // method: {}, arrows: false, //centerMode:true, //variableWidth: true, event: { beforeChange: function (event, slick, currentSlide, nextSlide) { }, afterChange: function (event, slick, currentSlide, nextSlide) { } } }; ... var data = ServiceFactory.getEventDetails(); data .then(onAuthenticated ) .catch(onRejectedRequest) .finally(sessionServiceFinally); .... onAuthenticated(resp){ console.log("vm.tickets[i].images.." + resp[0].images); $scope.images.push({url : resp[0].images}); $scope.images.push({url : resp[0].images}); $scope.images.push({url : resp[0].images}); } 

Answer 1

我最終使用ng-if解決了這個問題：）