Question

我有一系列项目items。

我想使用ng-repeat指令或类似的东西将n项组合在一起。例如：

我希望将items=['a', 'b', 'c', 'd', 'e', 'f', 'g']呈现为3个组，以呈现为：

<div class="row">
   <div class="col-sm-4">a</div>
   <div class="col-sm-4">b</div>
   <div class="col-sm-4">c</div>
</div>
<div class="row">
   <div class="col-sm-4">d</div>
   <div class="col-sm-4">e</div>
   <div class="col-sm-4">f</div>
</div>
<div class="row">
   <div class="col-sm-4">g</div>
</div>

我知道我可以做一些处理来将items变成items=[['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]但是我想知道anuglarjs是否有支持来解决这个问题。可以？如果没有，你会怎么做呢？

提前致谢。

Answer 1

你可以像这样使用`ng-repeat'..

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items">
        <span ng-switch on="$index % 3">
            <span ng-switch-when="0">
                <div class="row">
                    <div class="col-sm-4" ng-show="items[$index+0]">{{items[$index+0]}}</div>
                    <div class="col-sm-4" ng-show="items[$index+1]">{{items[$index+1]}}</div>
                    <div class="col-sm-4" ng-show="items[$index+2]">{{items[$index+2]}}</div>
                </div>
            </span>
        </span>
    </div>
</div>

演示：http://bootply.com/86855

Answer 2

AFAIK没有角度分组指令。

解决方案是对数据进行分组（underscore.js对此有用），然后在视图中嵌套ng-repeats。

Answer 3

您可以定义自己的过滤器：

app.filter('inGroupsOf', function() {
  var memoized = {};

  return function() {
    key = Array.prototype.slice.call(arguments);
    if (typeof memoized[key] === "undefined") {
      memoized[key] = _inGroupsOf.apply(this, arguments);
    }

    return memoized[key];
  };

  function _inGroupsOf(collection, group_size) {
    var ar = [];
    var i, j;

    for (i = 0, j = -1; i < collection.length; i++) {
      if (i % group_size == 0) {
        j++;
        ar[j] = [];
      }

      ar[j].push(collection[i]);
    }

    return ar;
  }
});

它使用memoization来阻止Error: 10 $digest() iterations reached. Aborting!

分组重复项目

3 个答案: