Angular two column ng-repeat

by godswatchdog

HTML

<div ng-app="app" ng-controller="Controller" class="row">
    <ul ng-repeat="limit in getLimits(array)" class="col">
        <li ng-repeat="item in array | limitTo : limit">
            {{ item }}
        </li>
    </ul>
</div>

CSS

.row {
    overflow: hidden;
    width: 300px;
}

.col {
    float: left;
    width: 100px;
}

JavaScript

angular.module('app', []);

angular.module('app')
.controller('Controller', [
    '$scope',
    
    function ThisController ($scope) {
        $http.get('http://jsonplaceholder.typicode.com/posts').then(function(results){
    $scope.posts = results.data;
  });
        
        $scope.getLimits = function (array) {
            return [
                Math.floor(array.length / 2) + 1,
                -Math.floor(array.length / 2)
            ];
        };
    }
]);