Question

我使用ng-repeat但我想在每第4个重复元素后添加一个元素。

重复的div：

<div class="product" ng-repeat="product in productList" ng-init="addFullScreenProduct($index, this)">

然后在我的控制器中：

$scope.addFullScreenProduct = function(index, event)
{
        var currentProduct = "<div id='" + (index/4) + "' class='currentProduct sixteen columns'></div>";
        var product = event.srcElement;
        currentProduct = $compile(currentProduct)($scope);
        product.after(currentProduct);
};

我无法获得＆＃34; currentProduct＆＃34;在＆＃34;产品＆＃34;之后添加的元素元件。

我想要的输出：

<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="product">...</div>
<div class="currentProduct">...</div>

任何想法？

Answer 1

您可以使用ng-repeat-start和ng-repeat-end，如下所示：

<div ng-repeat-start="product in productList" class="product">
    {{ product }}
</div>
<div ng-repeat-end ng-if="$index % 4 == 0" class="currentproduct sixteen columns"></div>

将重复div.product，每隔四次迭代就会出现div.currentproduct。

Answer 2

您可以使用过滤器显示每个第4个元素..像这样：

<div class="product" ng-repeat="product in productList" ng-show="$index % 4 == 0"></div>

每次ng-repeat后添加元素

2 个答案: