Question

目前正在开展一个练习项目，我正在利用我收集到的有远见的知识，继续收集我正在进行的在线课程。

我在访问嵌套数组时遇到了一些麻烦。我看到了一个在线教程，我已经按照所显示的内容进行了操作，但我显然没有做正确的事情。代码如下所示。

<div class="container">

    <div class="classic-movie" ng-repeat="films in movies">

        <div class="movie-summary">

            <div class="movie-image">

                <img ng-src="{{films.cover}}" class="movie-thumbnail">

            </div>

            <div class="movie-name-plot">

                <h1>{{films.title}}</h1>

                <p>{{films.plot}}</p> 

                <p><span class="white-mini-header">Starring:</span>{{films.starring}}</p>

                <p><span class="white-mini-header">Runtime:</span>{{films.runtime}}</p>

            </div>

        </div>

        <div class="movie-showtimes">

            <ul class="movie-timing mon-timings" ng-repeat="timing movies.monTimings">

                <li>{{timing.time1}}</li>
                <li>{{timing.time2}}</li>
                <li>{{timing.time3}}</li>
                <li>{{timing.time4}</li>
                <li>{{timing.time5}}</li>
                <li>{{timing.time6}}</li>

            </ul>

        </div>

    </div>

</div>

以下是数组中第一个对象的模板。

var myapp = angular.module("myapp", []);

myapp.controller("maincontroller", ["$scope", function($scope){

    $scope.movies = [

    {
        cover: "images/movie-images/ferres.jpg",
        title: "Ferris Bueller's Day Off (1987)",
        plot: "High school student Ferris Bueller wants a day off from school and he's developed an incredibly sophisticated plan to pull it off. He talks his friend Cameron into taking his father's prized Ferrari and with his girlfriend Sloane head into Chicago for the day. While they are taking in what the city has to offer school principal Ed Rooney is convinced that Ferris is, not for the first time, playing hooky for the day and is hell bent to catch him out. Ferris has anticipated that, much to Rooney's chagrin.",
        starring: "Matthew Broderick, Alan Ruck, Mia Sara",
        runtime: "103min",
        monTimings: [
        {
            time1: "10:45",
            time2: "13:10",
            time3: "15:45",
            time4: "18:25",
            time5: "20:30" ,
            time6: "21:50",

        }
        ]

    },

当我进入视图时，应该显示时间的列表根本不存在。

Answer 1

由于它是一个嵌套数组，我们需要两个迭代循环。您可以通过在第一个div中为monTimings添加第二个循环来实现它，如下所示

          <div class="classic-movie" ng-repeat="films in movies">
             <!-- use existing block for films -->
                 <ul class="movie-timing mon-timings" ng-repeat="timing in films.monTimings">
                   <!--use timing to iterate monTimings  -->
                 </ul>
            </div>

Answer 2

您在第二次 ng-repeat

in

您应films.monTimings上的 ng-repeat ，因为movies.monTimings不存在，因为movies是一个没有monTimings的数组属性。只有它包含的元素才有。

所以改变这个：

ng-repeat="timing movies.monTimings"

对此：

ng-repeat="timing in films.monTimings"

Answer 3

这一行<ul class="movie-timing mon-timings" ng-repeat="timing in films.monTimings">有误。

应该是：

in

您已忘记ng-repeat中的$('.collapse').on('shown.bs.collapse', function(e) { $('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight); });。

尝试使用ng-repeat访问嵌套数组

3 个答案: