Каким образом вывести данные в нескольких столбцах?

Question

[Max]

Как вывести данные с JSON в ангуляре? Есть код:

<div class="col-md-12 tovaru" ng-repeat="phone in phones">
   <tr>
        <td>{{phone.name}}</td>
   </tr>
</div>

То есть нужно n-ое количество записей с JSON файла вывести в трех столбцах.

Answer 1

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

Есть допустим 100 разных названий товара, нужно вывести их в 3 столбца.

а зачем тут таблица? Да и в вашем примере таблицы как бы и нет... Это можно сделать через css

<div class="col-md-12 product-list" ng-repeat="phone in phones">
   <div class="product">{{phone.name}}</div>
</div>

.product-list {
    column-count: 3;
}

Для IE9 есть полифил (ну и для хрома он тоже нужен, так как column-gap не поддерживается).

Если все же хочется именно средствами ангуляра - то по хорошему следует сделать директиву, которая будет резать коллекцию на три части и выводить. Но это сложно, если делать именно по феншую. А можно фигнуть фильтром, это не очень хорошо зато влоб.

Answer 2

[Roman Zhak]

Просто разместить их в трех столбцах нельзя?

<div ng-controller="demo">
 <table>
   <tr ng-repeat="phone in phones">
    <td>{{phone.id}}</td>
    <td>{{phone.cat}}</td>
    <td>{{phone.name}}</td>
   </tr>
 </table>
</div>

var app = angular.module('app', [])
   .controller('demo', function($scope){
      $scope.phones = [{id: 1, cat: 'Nokia', name: 'N90'}];
    });
   angular.bootstrap(document, ['app']);

jsfiddle.net/zhak55/s2pjzr3b

Comments

[Max]

Вы немного не поняли задачу) Есть допустим 100 разных названий товара, нужно вывести их в 3 столбца.

[Roman Zhak]

Максим Череватов тогда, например, можно использовать просто блоки с css-свойством float; jsfiddle.net/zhak55/s2pjzr3b/1

[Max]

Большое спасибо!)