3

我有一个简单的 ng-repeat 正在进行：

<div class="row-fluid">
  <div class="span4" ng-repeat="piece in clothes | filter:query">
    <img ng-src="{{piece.mainImage[0]}}" class="thumbImg" />
    <a href="#/json/{{piece.systemName}}">{{piece.name}}</a>
  </div>
</div>

重复 3 次后，我想停止重复，添加关闭<div>并打开一个新.row-fluid行（开始新行），然后重新开始我离开的循环，每 3 次插入标签。

Angular 的文档真的很难遍历，因此很难弄清楚如何做到这一点。

4

2 回答 2

8

您可以为数组分区创建一个过滤器。（如果你可以使用一些库，你可能会得到更短、更高效的东西。）

app.filter('partition', function() {
  var part = function(arr, size) {
    if ( 0 === arr.length ) return [];
    return [ arr.slice( 0, size ) ].concat( part( arr.slice( size ), size) );
  };
  return part;
});

你可以像这样使用它：

<div  ng-repeat="rows in list | partition:3">
  <div class="row" ng-repeat="item in rows">
    <div class="span4">{{ item }}</div>
  </div>
</div>
于 2013-05-13T02:32:11.870 回答
5

ngRepeat 将不断地重新评估过滤器，因为它每次运行时都会得到不同的值。

这个可怕的代码似乎在一般情况下有效。如果你有相同的数组，事情可能会变得很棘手。我们需要能够比较数组是否相等，但这是一个难题。我采取了简单/脆弱的方式，只是使用了stringify(). 无法angular.equals()为我工作；我认为它可能只适用于浅层物体。

app.filter('partition', function($cacheFactory) {
  var arrayCache = $cacheFactory('partition')
  return function(arr, size) {
    var parts = [], cachedParts,
      jsonArr = JSON.stringify(arr);
    for (var i=0; i < arr.length; i += size) {
        parts.push(arr.slice(i, i + size));        
    }
    cachedParts = arrayCache.get(jsonArr); 
    if (JSON.stringify(cachedParts) === JSON.stringify(parts)) {
      return cachedParts;
    }
    arrayCache.put(jsonArr, parts);

    return parts;
  }; 
});
于 2013-09-03T06:12:08.110 回答