How to display data in multiple columns?

Question

JavaScript

How to display data from JSON in Angular? There is a code:

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

That is, you need to output the n-th number of records from the JSON file in three columns.

Answer 1

There are, let's say, 100 different product names, you need to display them in 3 columns.

why is there a table? Yes, and in your example table, as it were, no ... This can be done through 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;
}

There is a polyfill for IE9 (well, it is also needed for chrome, since column-gap is not supported).
If you still want it by means of angular, then for good you should make a directive that will cut the collection into three parts and output it. But it is difficult if you do it according to Feng Shui. And you can use a filter, it's not very good, but vlob.

Answer 2

Can't you just put them in three columns?

<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