如何在离子项目中的嵌套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 =“在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" 
    } 
    ] 
}