javascript - 高级结构 : Surrounding ngRepeated items Angular. js

Question

你有一个正在迭代的对象数组， 您将如何用(元素)包围每个(x)个元素？

如果您的目标是:

每 4 个 ng 重复元素周围有一个(元素)？

surrounding
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
/
surrounding
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
  ng-repeated-elem
/

每 2 个组有一个(元素)包围 4 个 ng 重复元素

complicated
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
/
complicated
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
/

---

---

ng-repeat 的正常用法:

<div ng-controller="ExampleContrller as example" >      
  <div ng-repeat="ex in example.arr">
    <span>{{ex.a}}</span>
    <span>{{ex.b}}</span>
  </div>
</div>

会输出:

<div ng-controller="ExampleContrller as example" >      

  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>
  <div ng-repeat="ex in example.arr">
    <span>a</span>
    <span>b</span>
  </div>

</div>

你如何让 ng-repeat 输出这个:

<div ng-controller="ExampleContrller as example" >      

  <section> <!-- get a section to surround every (x) ng-repeated elements -->

    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>

  </section>

  <section>

    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>
    <div ng-repeat="ex in example.arr">
      <span>a</span>
      <span>b</span>
    </div>

  </section>

</div>

Answer 1

这是一种通过使用适当的分组创建另一个数组并使用两个 ng-repeat 来实现的方法:

$scope.data2 = (function(data, count) {
    var arr = [];
    var len = data.length / count;
    for (var i=0 ; i<len ; i++) {
        arr.push(data.slice(i*count, (i+1)*count));
    }
    return arr;
})($scope.data, 3);

-

<section ng-repeat="group in data2">
  <div ng-repeat="item in group">
    <span>{{item.a}}</span>
    <span>{{item.b}}</span>
  </div>
</section>

data为原始数组，count为每组的项目数
这是 fiddle :http://jsfiddle.net/a9n1e7w5/2/

可能有更好的方法来做到这一点，但这行得通。