AngularJS的ng-repeat每两项使用分隔符

AngularJS ng-repeat with seperator every two items

本文关键字：两项 分隔符 ng-repeat AngularJS      更新时间：2023-09-26

我想要实现的布局是:

<div>
    <div class="row">
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
    </div>
</div>

这样做得到div，但是我如何在每两个项目之间添加分隔符?我觉得Angular应该有一个简单的方法来做到这一点。

<div>
    <div class="row">
        <div ng-repeat="object in objects"></div>
    </div>
</div>

我认为，你可以使用一点javascript和ng-repeat来解决这个问题，就像

<div>
    <div class="row" ng-repeat="array in obj2">
        <div ng-repeat="object in array">{{object}}</div>
    </div>
</div>

，然后在你的angular控制器中创建一个名为obj2的新对象，使用objects数组，如

$scope.obj2 = [];
while ($scope.objects.length) {
    $scope.obj2.push($scope.objects.splice(0, 2))
}

演示:小提琴

如果我得到你想做的，你可以使用rgRepeat的$index属性，然后对该索引使用模，如:

<div ng-repeat="object in objects">
    <div>My Content</div>
    <div data-ng-show="$index % 3 == 0">My Seperator</div>
</div>
相关文章：