I have an array with N elements:
$scope.arr = ["1","2","3" ... ,"N"]
I need to make from it a table with X columns and N/X rows.
Can I use ng-repeat to achieve it?
I know that I can manipulate the array to this format :
$scope.arr = [["1","2","3"], ["4","5","6"] ...] and then I can use nested ng-repeat.
But I want to know if it possible to do it one one-level array.
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.x = 3;
$scope.arr = [];
for (i = 0; i < 100; i++) {
$scope.arr.push(i)
}
$scope.getColumns = function() {
return new Array($scope.x)
}
$scope.getRows = function() {
return new Array(Math.ceil(($scope.arr.length) / $scope.x))
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
Columns:
<input type="number" ng-model="x" />
<table border="1">
<tr ng-repeat="i in getRows() track by $index" ng-init="idx = $index">
<td ng-repeat="c in getColumns() track by $index" ng-init="idy=$index">{{arr[(idx*x)+idy]}}</td>
</tr>
</table>
</div>
</div>Nice problem. This is what I came up with:
<div ng-app='myApp' ng-controller="Main">
<table>
<tr ng-repeat="r in rows()">
<td ng-repeat="c in columns(r)">{{ c }}</td>
</tr>
</table>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('Main', function($scope){
$scope.arr = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"];
$scope.columnCount = 2;
$scope.rows = function(){
var input = [];
for (var i=0; i< $scope.arr.length / $scope.columnCount; i++) input.push(i);
return input;
};
$scope.columns = function(row){
var start = row * $scope.columnCount;
var end = start + $scope.columnCount;
var input = [];
for (var i=start; i< end; i++) input.push($scope.arr[i]);
return input;
};
});
