Comment distribuer des données ng-repeat dans des colonnes à l'aide de Bootstrap dans AngularJS ?

Distribution des données ng-Repeat dans des colonnes à l'aide de Bootstrap

Dans AngularJS, exploiter ng-repeat est fondamental lorsque l'on travaille avec des données répétitives. Cependant, il est souvent nécessaire d’organiser ces éléments selon une disposition visuellement attrayante, telle que trois colonnes distinctes. Pour y parvenir, nous explorons diverses approches, y compris des solutions au niveau du contrôleur et au niveau de la vue.

Transformation au niveau du contrôleur

Une approche robuste consiste à transformer le données au sein du contrôleur. En tirant parti de la fonction chunk fournie, nous pouvons diviser les données en sous-tableaux égaux, chacun représentant une colonne :

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

Ces données peuvent ensuite être restituées à l'aide d'un ng-repeat imbriqué, 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 au niveau de la vue

Alternativement, un filtre peut être utilisé pour obtenir la disposition souhaitée dans la vue. Cependant, cette approche est principalement destinée à des fins d'affichage et peut rencontrer des problèmes lors de l'incorporation d'éléments d'entrée :

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

Colonne verticale

Pour répartir les éléments verticalement plutôt qu'horizontalement, de légères modifications aux approches susmentionnées peuvent être apportées :

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

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

Colonnes CSS

Une autre solution élégante consiste à exploiter les colonnes CSS :

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

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