使用Angular ng-repeat将数据动态加载到materializecss滑块中不起作用

Load data into materializecss slider dynamically using Angular ng-repeat not working

本文关键字：materializecss 不起作用 加载 ng-repeat Angular 数据 动态 使用      更新时间：2023-09-26

我可以将鼠标悬停在滑块上div 和"复制图像 url"选项，因此数据设置正确，但滑块什么也没显示，它只是灰空白。

如果我删除类"滑块，幻灯片"，

那么我的所有数据都会垂直弹出，但在使用"滑块，幻灯片"类时不会。

我在我的主 HTML 中有这个：

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

我通过 GET 请求在角度中获取的示例 Json 数据：

      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 来确认图像 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) {
        });

我找到了解决方法。为什么我们不创建一个自定义事件并在获取转换响应时调度它？我们可以在同一个自定义事件上附加一个侦听器，在侦听器中我们可以调用 $('.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) {
    });

然后而不是打电话 $(document).ready(function () {$('.slider').slider();});从主.html我们必须做这样的事情

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

它对我有用。希望它有所帮助。这只是我想出的一个技巧。

相关文章：