Alineación de datos ng-repeat de AngularJS en tres columnas Bootstrap

AngularJS proporciona ng-repeat para crear dinámicamente elementos basados ​​en una matriz de datos. Cuando se trata de una cantidad significativa de elementos, alinearlos en columnas puede mejorar la interfaz de usuario y la legibilidad.

Transformación basada en controladores

El enfoque preferido es transformar los datos dentro del controlador que utiliza la función fragmentada de JavaScript, que divide los datos en grupos de tamaño uniforme:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
Los datos fragmentados transformados se pueden representar en la vista de la siguiente manera:

  
{{item}}
Filtrar en la vista (Precaución)
Aunque es posible, no se recomienda el uso de filtros para fragmentar los datos en la vista con fines de vinculación de datos. Si las entradas se utilizan dentro de la vista filtrada, puede generar inconsistencias.
<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>

Columnas verticales

Para alinear elementos verticalmente en lugar de horizontalmente, se puede utilizar una variación del método de fragmentación:

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>

Columnas CSS

Otra opción para crear columnas verticales es aprovechar las columnas CSS:

.columns {
  columns: 3;
}

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