Question

我有一个简单的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（开始一个新行），然后重新启动循环停下来，每次第三次插入标签。

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

Answer 1

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

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>

Answer 2

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

Angular.js ng-repeat：x次迭代后打开/关闭元素

2 个答案: