Code Snippet – CSS + AngularJs Tutorial : Ng-Repeat - Menampilkan Data Secara Vertikal

<html ng-app="App">
<head>
<title>Ng-Repeat with Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div ng-controller="MainCtrl">
    <ul class="vertically-loop">
      <li ng-repeat="data in collection">
        {{ data.title }}
      </li>
    </ul>
  </div>
</body>
</html>

var app = angular.module("App", []);
app.controller("MainCtrl", ['$scope', function($scope) {

  $scope.collection = [
    {id: 1, title:"Data 1"},
    {id: 2, title:"Data 2"},
    {id: 3, title:"Data 3"},
    {id: 4, title:"Data 4"},
    {id: 5, title:"Data 5"},
    {id: 6, title:"Data 6"},
    {id: 7, title:"Data 7"},
    {id: 8, title:"Data 8"},
    {id: 9, title:"Data 9"},
    {id: 10, title:"Data 10"}
  ];
}]);

.vertically-loop {
   column-count:3;
    -webkit-column-count:3;
    -moz-column-count:3;
 }

Code Snippet – CSS + AngularJs Tutorial : Ng-Repeat - Menampilkan Data Secara Vertikal