Как разбить элементы на колонки?

Question

[slip31]

Есть $scope.items = [{...}], который надо вывести в три колонки чекбоксами

<div ng-repeat="item in items">
      <div class="action-checkbox">
   <input id="{{item.name}}" type="checkbox" value="{{item.name}}"    ng-checked="selection.indexOf(item.name) > -1" ng-click="toggleSelection(item.name)" />
   <label for="{{item.name}}">{{item.name}}</label>
 </div> 
    </div> 
        </div>

Как наименее затратно вывести в три колонки количество items? По количеству
$scope.rows.length = Math.ceil($scope.items.length / 3);

Answer 1

[Владислав Козуля]

Не проще ли сверстать этот список так, чтобы элементы сами разбивались на три колонки?

Если уж нужно решить этот вопрос строго с помощью ангуляра, я бы не стал изгаляться, а сделал двумерный массив.

Answer 2

[Сергей Протько]

Сделайте директиву и внутри разрезайте нормально. Есть правда такой момент что если вы разрешите коллекцию на 3 массива, то придется отслеживать изменения коллекции и мэпить как-то. С другой стороны, можно воспользоваться фильтром limit внутри директивы.

Answer 3

[SagePtr]

Есть CSS-свойство columns, но не уверен, подойдёт ли в этой задаче. Для текста подходит замечательно, массивы чекбоксов заталкивать не пробовал.

Answer 4

[frees2]

.canal{  font-size: 92% ; -moz-column-count: 3; -webkit-column-count: 3;-o-column-count: 3; column-count: 3; padding:0; margin: 0;  border: none; display: inline-block; text-align: center; }