Comment puis-je aligner les données AngularJS ng-repeat sur trois colonnes Bootstrap ?

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 :

<code class="js">function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i<arr.length; i+=size) {
    newArr.push(arr.slice(i, i+size));
  }
  return newArr;
}

$scope.chunkedData = chunk(myData, 3);

Les chunkedData transformées peuvent ensuite être restituées dans la vue comme suit :

<code class="html"><div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div></code>

Filtrage dans la vue (Attention)

Bien que cela soit possible, l'utilisation de filtres pour regrouper 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.

<code class="html"><pre class="brush:php;toolbar:false">
<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 :

<code class="js">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;
}

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

Colonnes CSS

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

<code class="css">.columns {
  columns: 3;
}</code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!