使用Angular ng-repeat動態加載數據到materializecss滑塊

我可以將鼠標懸停在滑塊div上並且「copy image url」選項在那裏，因此數據設置正確，但滑塊沒有顯示任何內容，只是灰色的空白。使用Angular ng-repeat動態加載數據到materializecss滑塊

如果我刪除類「滑塊，幻燈片」，那麼我的所有數據都會垂直彈出，但不會在使用「滑塊，幻燈片」類時彈出。

我有這個在我的主HTML：

  $(document).ready(function() { 
       $('.slider').slider(); 
      });

我的樣本JSON數據，我通過GET請求角得到：

 cast: [ 
      { 
       cast_id: 0, 
       character: "Mark Watney", 
       credit_id: "53e7e85e0e0a266f9a0029aa", 
       id: 1892, 
       name: "Matt Damon", 
       order: 0, 
       profile_path: "/eLAWpp5BLbTwjj35MbGzpL0QkWv.jpg" 
      }, 
      { 
       cast_id: 9, 
       character: "Melissa Lewis", 
       credit_id: "5466c78eeaeb8172820008e4", 
       id: 83002, 
       name: "Jessica Chastain", 
       order: 1, 
       profile_path: "/eyv98YlnRuOOUNCD1U6w2yZDRA2.jpg" 
      }, 
      { 
       cast_id: 11, 
       character: "Annie Montrose", 
       credit_id: "5497ab23c3a368054b0009b4", 
       id: 41091, 
       name: "Kristen Wiig", 
       order: 2, 
       profile_path: "/eqHjl70yPVAYcpYnqKk62a3pzDd.jpg" 
      }, 
      { 
       cast_id: 13, 
       character: "Teddy Sanders", 
       credit_id: "54a7fe92c3a3680c33001972", 
       id: 8447, 
       name: "Jeff Daniels", 
       order: 3, 
       profile_path: "/gai03gCu3DxMYxFympt7hUObpI5.jpg" 
      } 
      ]

現在我從角，但滑塊設置這個數據顯示爲灰色，我可以通過將鼠標懸停在灰色區域並複製圖像url來確認圖像網址。但是div中沒有顯示任何內容。

 <div class="row card-panel" ng-show="castShow"> 
       <div class="slider"> 
        <ul class="slides"> 
         <li ng-repeat="act in actors.cast"> 
          <img ng-src="http://image.tmdb.org/t/p/original{{act.profile_path}}"> 

          <div class="caption" style="margin-top: 262px;margin-left:80px;"> 
           <h5 class="indigo-text right-align" ng-bind="act.character"></h5> 
           <h6 class="white-text right-align" ng-bind="act.name"></h6> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div>

我angularJS代碼在那裏我得到和設定數據：

 DetailsService.GetMovieCredits(mid).then(function (response) { 
      var json = angular.fromJson(response); 
      //var cast = json.cast; 
      $scope.actors = json; 
      $scope.castShow = true; 
     }, function (response) { 
     });

來源

2016-01-24 Nikhil Verma

我不明白你的問題。「我可以將鼠標懸停在滑塊上並複製圖片網址」 – Sandeep

請澄清您的問題 –

我的數據在ng-repeat演員中正在加載（因爲我沒有使用滑塊和幻燈片類進行測試），但是沒有任何內容顯示在DIV。 –

我已經找到了工作，對同一。我們爲什麼不創建一個自定義事件並在獲取演員響應時調度它？我們可以在同一個自定義事件上附加一個監聽器，並且可以在監聽器中呼叫$('.slider').slider();。

角部分代碼會是這個樣子

DetailsService.GetMovieCredits(mid).then(function (response) { 
     var json = angular.fromJson(response); 
     $scope.actors = json; 
     $scope.castShow = true; 
     //Creating custom event for slider data loaded 
     var event = document.createEvent('Event'); 
     event.initEvent('slider-ready',true,true); 
     document.querySelector('.slider').dispatchEvent(event); 
    }, function (response) { 
    });

然後，而不是從main.html中調用 $(document).ready(function() {$('.slider').slider();});我們必須做這樣的事情

$('.slider).on('slider-ready', function (e) { 
      //Adding timeout as direct function call was not working 
      setTimeout(function(){ 
       $('.slider').slider(); 
      },1);  
});

它爲我工作。希望它有幫助。這只是我提出的一個黑客攻擊。

來源

2017-03-15 11:59:53 Samarth

使用Angular ng-repeat動態加載數據到materializecss滑塊

回答

相關問題