Comment puis-je diviser les données ng-repeat en trois colonnes à l'aide d'AngularJS et Bootstrap ?

Diviser les données ng-repeat en trois colonnes

AngularJS permet aux développeurs d'afficher des données dynamiques dans une page Web à l'aide de la directive ng-repeat. Cependant, lorsque l’on travaille avec un grand nombre d’éléments de données, il devient souvent nécessaire d’organiser les éléments selon une présentation structurée. Cela nécessite la division des données en colonnes, ce qui peut être réalisé en utilisant diverses approches.

L'intégration de Bootstrap pour l'alignement

Bootstrap, un framework frontal populaire, fournit un mécanisme simple pour créer des dispositions de grille réactives et cohérentes. En incorporant Bootstrap dans notre code, nous pouvons aligner sans effort les zones de texte ou d'autres éléments de formulaire en trois colonnes égales et soigneusement disposées.

Étape 1 : Transformation du contrôleur

Le plus Une méthode efficace et fiable pour diviser les données en colonnes consiste à les manipuler au sein du contrôleur. Cela implique de créer une fonction chunk et de l'utiliser dans la directive ng-repeat :

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

remplacer le ng-repeat par un nouveau segment de code :

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

Cette méthode garantit que le les données restent dans leur format d'origine et peuvent être manipulées ou soumises sans aucune modification.

Étape 2 : Chunking basé sur la vue

Bien qu'il soit possible d'effectuer un fractionnement des données à l'aide filtres dans la vue, il est crucial de noter que cette approche ne convient qu'à des fins d'affichage. Tout élément de formulaire ajouté dans de telles vues filtrées peut entraîner des problèmes potentiels. Il est recommandé de manipuler les données dans le contrôleur pour tout élément interactif. Cependant, si vous souhaitez toujours utiliser le chunking basé sur les vues, vous pouvez envisager d'utiliser une bibliothèque comme lodash pour améliorer sa stabilité et ses performances.

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!