Выравнивание данных AngularJS ng-repeat в трех столбцах начальной загрузки

AngularJS предоставляет ng-repeat для динамического создания элементов на основе массива данных. Когда вы имеете дело со значительным количеством элементов, выравнивание их по столбцам может улучшить пользовательский интерфейс и повысить его читабельность.

Преобразование на основе контроллера

Предпочтительный подход — преобразовать данные внутри контроллер использует функцию фрагмента JavaScript, которая разбивает данные на группы одинакового размера:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
Преобразованные chunkedData затем могут быть отображены в представлении следующим образом:

  
{{item}}
Фильтрация в представлении (предупреждение)
Хотя использование фильтров для разделения данных в представлении возможно, не рекомендуется для целей привязки данных. Если входные данные используются в отфильтрованном представлении, это может привести к несоответствиям.
<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>

Вертикальные столбцы

Чтобы выровнять элементы по вертикали, а не по горизонтали, можно использовать вариант метода фрагментирования:

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>

Столбцы CSS

Другой вариант создания вертикальных столбцов — использование столбцов CSS:

.columns {
  columns: 3;
}

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