使用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滑块

回答

相关问题