Gruppe ng-repeat items

Question

Ich habe eine Reihe von Artikeln items.

Ich möchte die ng-Repeat-Direktive oder etwas ähnliches verwenden, um die n Elemente zusammen zu gruppieren. Zum Beispiel:

würde Ich mag items=['a', 'b', 'c', 'd', 'e', 'f', 'g'] in Gruppen von 3 zu erbringenden gerendert werden als:

<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> 

weiß ich, ich könnte einige Berechnungen durchführen zu drehen items in items=[['a', 'b', 'c'], ['d', 'e', 'f'], ['g']] aber ich frage mich, ob anuglarjs Unterstützung hatte um das zu umgehen. Macht es? Wenn nicht, wie würdest du das machen?

Vielen Dank im Voraus.

Answer 1

Sie können `ng-repeat‘ ​​wie folgt ..

<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> 

Demo: http://bootply.com/86855

Answer 2

AFAIK gibt es keine Gruppierungsrichtlinien in eckigen.

Eine Lösung besteht darin, die Daten zu gruppieren (Unterstreichung.js ist gut für diese) und dann verschachtelte ng-Wiederholungen in der Ansicht.

Answer 3

Sie könnten Ihren eigenen Filter definieren:

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

Es verwendet memoization Error: 10 $digest() iterations reached. Aborting! zu verhindern