How to split elements into columns?

Question

css

There is $scope.items = [{...}], which should be displayed in three columns with checkboxes

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

What is the least expensive way to display the number of items in three columns? By quantity
$scope.rows.length = Math.ceil($scope.items.length / 3);

Answer 1

Wouldn't it be easier to lay out this list so that the elements themselves break into three columns?
If you really need to solve this issue strictly with the help of angular, I would not go out of my way, but made a two-dimensional array.

Answer 2

Make a directive and cut normally inside. There is really such a moment that if you allow the collection to 3 arrays, you will have to track the changes in the collection and map it somehow. On the other hand, you can use the limit filter inside the directive.

Answer 3

There is a CSS property called columns , but I'm not sure if it's suitable for this task. It fits great for text, I didn’t try to push arrays of checkboxes.

Answer 4

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