AngularJS và ngRepeat - chèn thêm phần tử mỗi lần lặp lại

Question

Tôi đang cố gắng tạo cấu trúc trong đó mỗi 7 div lặp lại có thêm một div được chèn vào. Div này phải thuộc về cha mẹ và không phải là con của một trong số các div được lặp lại.

Nó không đủ để thay đổi lớp học, toàn bộ nội dung sẽ khác nhau và hoàn toàn khác nhau ngShow logic sẽ được sử dụng với div bổ sung.

Vì vậy, ví dụ:

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="special-child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="special-child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="special-child"></div> 
</div> 

Đó dụ sử dụng một số cụ thể của các div, các ngRepeat có thể là bất kỳ số. Nó cũng quan trọng là kết quả cuối cùng của ngRepeat đặt trong một div bổ sung sau đó, ngay cả khi nó không phải là một bội chính xác của 7.

Các ngRepeat logic hiện tại tôi đang sử dụng là:

<div id="parent"> 
    <div class="child" ng-repeat="o in data"></div> 
    <div class="special-child"></div> 
</div> 

Nhưng điều này không hoạt động đúng như div bổ sung chỉ được chèn một lần sau khi tất cả các div lặp đi lặp lại.

Cập nhật với ví dụ làm việc

<div id="parent"> 
    <div class="child" ng-repeat-start="o in data"></div> 
    <div class="special-child" ng-if="($index + 1) % 7 == 0 || $last" ng-repeat-end></div> 
</div> 

Giải pháp này đòi hỏi AngularJS 1.2+

Answer 1

Bạn cần một cái gì đó như thế này:

<div ng-repeat="o in data"> 
    <div class="child"></div> 
    <div ng-if="$index % 7 == 0" class="special-child"></div> 
</div>