2013-08-18 14 views
7

Tôi tự hỏi nếu có một giải pháp đơn giản cho loại vấn đề này.ng-repeat số lượng chưa biết của các phần tử lồng nhau

Tôi có một chú thích đối tượng, lần lượt có thể chứa nhận xét và những nhận xét đó cũng có thể chứa nhận xét ... và điều này có thể tiếp tục cho một số chu kỳ không xác định.

Dưới đây là một ví dụ về cấu trúc dữ liệu:

var comment = { 
    text : "", 
    comments: [ 
     { text: "", comments : []}, 
     { text: "", comments: [ 
     { text: "", comments : []}, 
     { text: "", comments : []} 
     { text: "", comments : []} 
     ]} 
    ] 
} 

Hãy nói cho 2 cấp độ của ý kiến ​​tôi sẽ viết:

<div ng-repeat="comment in comments"> 
    {{comment.text}} 
    <div ng-repeat="comment in comments"> 
     {{comment.text}} 
    </div> 
</div> 

Làm thế nào tôi sẽ implent divs tôi cho mức độ "n" của nhận xét lồng nhau?

Trả lời

9

Cách dễ nhất là tạo một phần chung để bạn có thể gọi đệ quy và hiển thị nó bằng cách sử dụng ng-include.

<div ng-include="'partialComment.html'" ng-model="comments"></div> 

Đây là một phần:

<ul> 
    <li ng-repeat="c in comments"> 
     {{c.text}} 
     <div ng-switch on="c.comments.length > 0"> 
     <div ng-switch-when="true"> 
      <div ng-init="comments = c.comments;" ng-include="'partialComment.html'"></div> 
     </div> 
     </div> 
    </li> 
</ul> 

Các mô hình dữ liệu phải là một danh sách var comments = [{ ... }].

Tôi đã tạo bản trình diễn cho bạn và hy vọng nó sẽ giúp ích.

Demo

+0

Có cách nào để ẩn tất cả các phần tử ngoại trừ tập đầu tiên trong đệ quy không? – guiomie

+0

@guiomie bạn có thể kiểm tra tham số đầu tiên $ trong bộ lặp ng. – zsong

+0

ý tôi là ẩn tất cả các phần tử không nằm trong mảng đầu tiên, không phải là các phần tử đầu tiên của mỗi mảng. Vì vậy, chỉ các phần tử của mảng chú thích đầu tiên không bị ẩn ... – guiomie

1

Bạn cần một chỉ thị đệ quy. Một cái gì đó như this, hoặc có lẽ tốt hơn this.

+0

Các [gistflow] (http://gistflow.com/posts/843-creating-recursive-templates-in-angular-js) liên kết là chết. –

Các vấn đề liên quan