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 に答える