Alignement des données ng-repeat d'AngularJS dans trois colonnes d'amorçage

AngularJS fournit ng-repeat pour créer dynamiquement des éléments basés sur un tableau de données. Lorsque vous traitez un nombre important d'éléments, les aligner dans des colonnes peut améliorer l'interface utilisateur et la lisibilité.

Transformation basée sur le contrôleur

L'approche privilégiée consiste à transformer les données au sein du contrôleur utilisant la fonction chunk de JavaScript, qui divise les données en groupes de taille égale :

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
Les chunkedData transformés peuvent ensuite être restitués dans la vue comme suit :

  
{{item}}
Filtrage dans la vue (Attention)
Bien que cela soit possible, l'utilisation de filtres pour fragmenter les données dans la vue n'est pas recommandée à des fins de liaison de données. Si des entrées sont utilisées dans la vue filtrée, cela peut entraîner des incohérences.
<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
  <div class="column" ng-repeat="item in row">
    {{($parent.$index*row.length) $index 1}}. {{item}}
  </div>
</div>

Colonnes verticales

Pour aligner les éléments verticalement plutôt qu'horizontalement, une variante de la méthode de segmentation peut être utilisée :

function columnize(input, cols) {
  var arr = [];
  for(i = 0; i < input.length; i  ) {
    var colIdx = i % cols;
    arr[colIdx] = arr[colIdx] || [];
    arr[colIdx].push(input[i]);
  }
  return arr;
}

<div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div>

Colonnes CSS

Une autre option pour créer des colonnes verticales consiste à exploiter les colonnes CSS :

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>