Angular: Empty Fiddle

http://angularjs.org/

by Sinh Nguyen

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<label>column break</label>
  <input type="text" ng-model="columnBreak">
  <div class="table">
    <div class="label" 
         ng-class="{'new-row': startNewRow($index, columnBreak) }"
    ng-repeat="item in items">{{ item.name }} ({{ $index + 1 }})</div>
  </div>
</div>

CSS

table, td { 
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 5px;
}
body {
  padding: 20px;
  
}

.table {
  border: 1px solid #888;
  border-radius: 5px;
  width: auto;
  height: 300px;
  padding: 10px;
  
}

.label {
  margin-right: 3px;
  margin-bottom: 3px;
  float: left;
  width: 70px;
  text-align: left;
}

.new-row {
  clear: left;
  background: orange;
}

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

scope.items = (function () {
    var cells = [];
    for ( var i=0; i < 50; i++) {
      cells.push({name: 'cell ' + i});
    }
    return cells;
  })();
  
  scope.columnBreak = 5;//max number of cols
  
  scope.startNewRow = function (index, count) {
      return ((index) % count) === 0;
  };
var data = [
            ['A1', 'B1', 'C1'],
            ['A2', 'B2', 'C2'],
            ['A3', 'B3', 'C3']
           ];

function MyCtrl($scope) {
    $scope.data = data;
}