Alinhando dados de repetição de ng AngularJS em três colunas de bootstrap

AngularJS fornece repetição de ng para criar elementos dinamicamente com base em uma matriz de dados. Ao lidar com um número significativo de elementos, alinhá-los em colunas pode melhorar a interface do usuário e a legibilidade.

Transformação baseada em controlador

A abordagem preferida é transformar os dados dentro do controlador usando a função chunk do JavaScript, que divide os dados em grupos de tamanhos iguais:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
O chunkedData transformado pode então ser renderizado na visualização da seguinte forma:

  
{{item}}
Filtragem na visualização (cuidado)
Embora seja possível, o uso de filtros para agrupar os dados na visualização não é recomendado para fins de vinculação de dados. Se as entradas forem usadas na visualização filtrada, isso pode levar a inconsistências.
<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>

Colunas verticais

Para alinhar itens verticalmente em vez de horizontalmente, uma variação do método de agrupamento pode ser usada:

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>

Colunas CSS

Outra opção para criar colunas verticais é aproveitar colunas CSS:

.columns {
  columns: 3;
}

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