Comment utiliser AngularJS ng-repeat avec l'échafaudage de Twitter Bootstrap ?

Question

Comment utiliser AngularJS ng-repeat pour afficher le HTML suivant (échafaudage Twitter Bootstrap) ? Essentiellement, tous les trois enregistrements, je dois fermer la balise </div> imprimer un <hr> puis en ouvrir un autre <div class="span4">

    <div class="row">
      <div class="span4">
        <h3>
          Project A
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project B
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project C
        </h3>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="span4">
        <h3>
          Project D
        </h3>
      </div>
      <div class="span4">
        <h3>
          Lab Title
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project E
        </h3>
      </div>
    </div>

J'ai créé un fiddle pour les démonstrations de code.
http://jsfiddle.net/ADukg/261/

Answer 1

Voici un moyen :

<div ng-controller="MyCtrl">
  <div ng-repeat="project in projects">
    <span ng-if="$index % 3 == 0">
      <hr />
      <div class="row">
        <h3 class="span4" ng-if="projects[$index+0]">{{projects[$index+0]}}</h3>
        <h3 class="span4" ng-if="projects[$index+1]">{{projects[$index+1]}}</h3>
        <h3 class="span4" ng-if="projects[$index+2]">{{projects[$index+2]}}</h3>
      </div>
    </span>
  </div>
</div>

Cette méthode fonctionnera également si vous avez par exemple 7 éléments de données : sur les 3 dernières données, il n'affichera que l'élément 7 et n'essaiera pas d'afficher les éléments inexistants 8 et 9.

http://jsfiddle.net/4LhN9/68/

EDIT : Mise à jour pour utiliser ng-if & angular 1.2.12

Answer 2

L'évolution de la réponse la plus facile . Je n'aime pas la solution originale en raison des éléments dom vides qu'elle produit. Ceci pour 3 divs par ligne.

<div ng-controller="ModulesCtrl">
    <div class="row" ng-repeat="i in fields.range()">
        <div class="span4" ng-repeat="field in fields.slice(i,i+3)">
            <h2>{{field}}</h2>
        </div>
    </div>
</div>

Dans la fonction FieldsCtrl($scope) :

$scope.fields.range = function() {
    var range = [];
    for( var i = 0; i < $scope.fields.length; i = i + 3 )
        range.push(i);
    return range;
}

Si vous connaissez fields.length, vous pouvez, au lieu de fields.range(), utiliser [0,3,6,9], etc.

Answer 3

Une manière plus élégante consiste à utiliser le modèle de vue pour fournir une collection fragmentée, puis à laisser la vue la gérer comme

 <div ng-controller="Controller">
    Projects <input ng-model="projects"></input>
    <hr/>
    <div ng-repeat="row in rows">
        <div ng-repeat="project in row">
            Projects {{project}}
        </div>
        <hr/>
    </div>
</div>​
 

et le coffeescript est assez simple

 # Break up an array into even sized chunks.
chunk = (a,s)->
    if a.length == 0
        []
    else               
        ( a[i..i+s-1] for i in [0..a.length - 1 ] by s)

@Controller = ($scope)->
    $scope.projects = "ABCDEF"

    $scope.$watch "projects", ->      
       $scope.rows = chunk $scope.projects.split(""), 3

angular.bootstrap(document, []);
 

La

http://jsfiddle.net/ADukg/370/

Answer 4

Pour garder la logique d'affichage hors du contrôleur et obtenir une solution plus réutilisable, vous pouvez créer un filtre personnalisé qui divise le tableau en groupes de lignes :

angular.module('app').filter('group', function() {
    /**
     * splits an array into groups of the given size
     * e.g. ([1, 2, 3, 4, 5], 2) -> [[1, 2], [3, 4], [5]]
     */
    return function(array, groupSize) {
        return _.groupBy(array, function(val, index) {
            return Math.floor(index / groupSize);
        });
    };
});

Et dans la vue :

<div class="row" ng-repeat="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>

Pour inclure le hr, vous pouvez utiliser les points de début et de fin ng-repeat :

<div class="row" ng-repeat-start="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>
<hr ng-repeat-end />

Answer 5

points de fin ng-repeat-start et ng-repeat-end semble être un moyen pratique d'y parvenir :

Ce qui conduit à un code simple

<div ng-controller="MyCtrl">
    <div ng-repeat-start="project in projects">
        <span>
            <div class="row">
                <h3 class="span4">{{project}}</h3>
            </div
        </span>
    </div>
    <hr ng-repeat-end ng-if="($index + 1) % 3 == 0" />
</div>

Voir ceci jsfiddle