6

我有一系列项目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 是否有支持来解决这个问题。可以？如果没有，你会怎么做呢？

提前致谢。

4

3 回答 3

12

你可以像这样使用“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

于 2013-10-10T13:54:14.637 回答
1

AFAIK 角度中没有分组指令。

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

于 2013-10-10T07:49:58.783 回答
0

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

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;
  }
});

它使用记忆来防止Error: 10 $digest() iterations reached. Aborting!

于 2016-05-23T17:08:04.660 回答