Create table in HTML using ng-repeat - angularjs

Question

I've an array of string, I need to display it using ng-repeat of AngularJS like the following screenshot:
I have an idea, to "play" in the index-s to display that:
<tbody ng-repeat="param in params">
<tr>
<td>{{param.name}}</td>
</tr>
</tbody>
That for every row I'll display the first item, and to display in the same row every ( $index, $index + 3, $index + 6)
Is there any other ideas, or an idea how to do that?

Answer 1

You can do something like this:
http://jsfiddle.net/cmdm1dhL/1/
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="row in [] | range:Math.ceil(items.length/tableColumns)">
<td ng-repeat="item in items | everyNth:row:Math.ceil(items.length/tableColumns)">{{item}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++)
input.push(i);
return input;
};
});
myApp.filter('everyNth', function() {
return function(input, row, nth) {
var output = [];
for (var i=row; i<input.length; i+=nth)
output.push(input[i]);
return output;
};
});
function MyCtrl($scope) {
var numberOfItems = 14;
$scope.items = [];
for (var i=1; i<=numberOfItems; i++)
$scope.items.push('Item ' + i);
$scope.tableColumns = 3;
$scope.Math = window.Math;
}
</script>