Comment diviser les données ng-repeat en trois colonnes à l'aide de Bootstrap ?

Diviser les données ng-repeat en trois colonnes à l'aide de Bootstrap

Lorsque vous travaillez avec ng-repeat dans AngularJS, il est courant de vouloir organiser les données dans plusieurs colonnes. Cet article explore différentes méthodes pour diviser les données ng-repeat en trois colonnes à l'aide de Bootstrap.

Transformation des données dans le contrôleur

L'approche la plus fiable consiste à transformer les données dans le contrôleur. Cela vous permet de conserver la structure de données d'origine tout en créant un nouveau tableau de données fragmentées. Vous pouvez utiliser une fonction comme la suivante :

<code class="javascript">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);

À votre avis, parcourez les données fragmentées :

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

Filtre dans la vue (non recommandé pour les entrées)

Bien qu'il soit possible d'utiliser un filtre pour afficher des données fragmentées, il est important de noter que cette méthode ne convient pas à une utilisation avec des entrées. Au lieu de cela, comptez sur la transformation des données dans le contrôleur.

Colonnes verticales

Pour les dispositions de colonnes verticales, vous pouvez modifier le CSS ou utiliser des fonctions personnalisées pour organiser les éléments :

Colonnes CSS (préférées)

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

Fonction personnalisée

Alternativement, vous pouvez distribuer des listes inégales verticalement en utilisant une fonction personnalisée :

<code class="javascript">var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
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>

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!