Question

我希望通过使用ng-repeat的对象中的元素进行迭代。

这是我到目前为止所做的：

控制器：

app.controller('videoDisplayCtrl', function($scope){

var videos = 
    [
        {
        title: 'Course introduction',
        pictureUrl: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS_kNT5UnXz5dQ6tId9YO0wIJ7YSgRvD1SUxyfdXcXZVdOH7z4b',
        length: '3:32',
        category: 'IT',
        subscribers: 3,
        date: new Date(2014, 12, 15),
        haveSubtitles: false,
        comments: [
            {
            username: 'Pesho Peshev',
            content: 'Congratulations Nakov',
            date: new Date(2014, 12, 15, 12, 30, 0),
            likes: 3,
            websiteUrl: 'http://pesho.com/'
            },
            {
            username: 'Pesho Peshev1',
            content: 'Congratulations Nakov',
            date: new Date(2014, 12, 15, 12, 30, 0),
            likes: 3,
            websiteUrl: 'http://pesho.com/'
            },
            {
            username: 'Pesho Peshev2',
            content: 'Congratulations Nakov',
            date: new Date(2014, 12, 15, 12, 30, 0),
            likes: 3,
            websiteUrl: 'http://pesho.com/'
            }
            ]
        }
    ];
    $scope.videos = videos;
    console.log(videos);});

在视图中我这样做：

<div ng-controller="videoDisplayCtrl">
    <h2 ng-repeat="x in videos">
        {{x.comments[0].username}}
    </h2>
</div>

这将仅显示“comments”数组的第一个对象的第一个“用户名”。我错过了什么，但我看不出来。

Answer 1

<div ng-controller="videoDisplayCtrl">
    <div ng-repeat="x in videos">
         <h2 ng-repeat="comment in x.comments">
        {{comment.username}}
         </h2>
    </div>
</div>

你需要两个循环，在你的视频中循环播放，第二个循环在每个视频中循环你的评论，这是另一个阵列。

Answer 2

您的评论也位于Array内，因此您还需要一个ng-repeat来显示它：

<div ng-controller="videoDisplayCtrl">
    <div ng-repeat="video in videos">
        <h2 ng-repeat="comment in video.comments">{{comment.username}}</h2>
    </div>
</div>

顺便说一句，为您的变量/属性选择一个可读的名称是一个好习惯，而不是像x那样。

Answer 3

有两种方法可以做到：

1 - 删除“[0]”，让ng-repeat从数组的迭代中获取数据。

<div ng-controller="videoDisplayCtrl">
   <h2 ng-repeat="x in videos">
       {{x.comments.username}}
   </h2>
</div>

2 - 在ng-repeat声明中将数组分配给“x”

<div ng-controller="videoDisplayCtrl">
    <h2 ng-repeat="x in videos.comments">
        {{x.username}}
    </h2>
</div>

Angularjs ng-repeat对象中的数组

3 个答案: