2016-08-01 1 views
0

중첩 된 json 개체에 ng-repeat을 사용하려고합니다.이온 프로젝트에서 중첩 된 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> 

을 나열하는 방법을 알 수 있습니까?

+0

을 "card.comments의 주석"으로 사용해서는 안됩니까? – lossleader

+0

그래, @lossleader 전에 시도했지만 잘 작동하지 않았다. – vbotio

+0

첫 코멘트는 선택한 구조를 따르지 않는 "코멘트"입니다. – lossleader

답변

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" 
    } 
    ] 
} 
+0

완벽하게 작동했습니다! 정말 고맙습니다! – vbotio

관련 문제