@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);
  • Вопрос задан
  • 2827 просмотров
Пригласить эксперта
Ответы на вопрос 4
5angel
@5angel
Фронтенд-лид
Не проще ли сверстать этот список так, чтобы элементы сами разбивались на три колонки?

Если уж нужно решить этот вопрос строго с помощью ангуляра, я бы не стал изгаляться, а сделал двумерный массив.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Сделайте директиву и внутри разрезайте нормально. Есть правда такой момент что если вы разрешите коллекцию на 3 массива, то придется отслеживать изменения коллекции и мэпить как-то. С другой стороны, можно воспользоваться фильтром limit внутри директивы.
Ответ написан
SagePtr
@SagePtr
Еда - это святое
Есть CSS-свойство columns, но не уверен, подойдёт ли в этой задаче. Для текста подходит замечательно, массивы чекбоксов заталкивать не пробовал.
Ответ написан
@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; }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы