javascript - 如何在 ionic 项目的嵌套 json 中使用 ng-repeat

Question

我正在尝试在嵌套 json 对象中使用ng-repeat。

{
        "title": "Important message 01",
        "img": "any url image here",
        "authorPhoto": "http://lorempixel.com/40/40/people/4/",
        "author": "John Doe",
        "datePosted": "1 day ago",
        "thumbsUp": "245",
        "thumbsDown": "200",
        "commentsNum": "123",
        "id": "1",
        "comments": [
            "comment", 
            {
                "authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
                "author": "Jimmy doe",
                "text": "useless commment",
                "dateCommented": "01/08/2016"
            }
        ]
    }

我可以列出顶级 json(标题、img 等...)，但我知道如何列出评论部分

<ion-item ng-repeat="card in cards" href="#/app/playlists/{{card.id}}" class="card-wrapper">
        <div class="card" style="background: url({{card.img}}); background-size:100%;">
            <div class="inner-wrapper">
                <img ng-src="{{card.authorPhoto}}" alt="Author profile photo">
                <p class="author">{{card.author}} <br>
                                  {{card.datePosted}}
                </p>
                <p class="essay">{{card.title}}</p>
                <div class="footWrapper">
                    <div class="thumbsUp"><i class="icon ion-arrow-up-c"></i>{{card.thumbsUp}}</div>
                    <div class="comments">{{card.commentsNum}}</div>
                    <div class="thumbsDown"><i class="icon ion-arrow-down-c"></i>{{card.thumbsDown}}</div>
                </div>  
            </div>
        </div>
        <div class="commentsWrapper">
            <div class="head">
                <img class="profilePhoto" src="http://tilomitra.com/wp-content/uploads/2014/08/avatar-cartoon.png" alt="avatar photo">
                <input type="text" placeholder="Write a comment...">
            </div>
            <div class="commentsContainer">
                <ul>
                    <li ng-repeat="comment in cards.comments">
                        {{comment.authorCommentPhoto}} <br>
                        {{comment.author}} <br>
                        {{comment.text}} <br>
                        {{comment.dateCommented}}
                    </li>
                </ul>
            </div>
        </div>
    </ion-item>

我该如何解决这个问题？

Answer 1

注释数组有一个字符串和一个对象。删除字符串“comments”并仅使用对象数组。然后使用 ng-repeat="comment in card.comments"

{
  "comments":[
     {
                "authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
                "author": "Jimmy doe",
                "text": "useless commment 1",
                "dateCommented": "01/08/2016"
     },
     {
                "authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
                "author": "Jimmy doe",
                "text": "useless commment 2",
                "dateCommented": "01/09/2016"
     }
  ]
}