AngularJS NG-重复与分离器每隔两个项目

本文介绍了AngularJS NG-重复与分离器每隔两个项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要实现的布局是这样的：

 ＆LT; DIV＆GT;
    ＆LT; DIV CLASS =行＆GT;
        ＆LT; DIV＆GT;＆LT; / DIV＆GT;
        ＆LT; DIV＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =行＆GT;
        ＆LT; DIV＆GT;＆LT; / DIV＆GT;
        ＆LT; DIV＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =行＆GT;
        ＆LT; DIV＆GT;＆LT; / DIV＆GT;
        ＆LT; DIV＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

这样做让我的div，但我怎么能每两个项目之间添加分隔符？我觉得像角应该有一个简单的方法来做到这一点。

 ＆LT; DIV＆GT;
    ＆LT; DIV CLASS =行＆GT;
        ＆LT; DIV NG重复=，在对象的对象＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

解决方案

我想，你可以用一点JavaScript和它解决了NG-重复像

 ＆LT; DIV＆GT;
    ＆LT; DIV CLASS =行NG-重复=数组中OBJ2＆GT;
        ＆LT; DIV NG重复=对象数组＆GT; {{对象}}＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

然后在您的角度控制器创建像

称为OBJ2使用对象数组的新对象

  $ scope.obj2 = [];
而（$ scope.objects.length）{
    $ scope.obj2.push（$ scope.objects.splice（0，2））
}

演示：

The layout I'm trying to achieve is this:

<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>

Doing this gets me the divs, but how can I add separators between every two items? I feel like Angular should have an easy way to do this.

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

解决方案

I think, you can solve it using a bit of javascript and ng-repeat like

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

then in your angular controller create a new object called obj2 using the objects array like

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

Demo: Fiddle

这篇关于AngularJS NG-重复与分离器每隔两个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！