Create div with AngularJS - html

Question

I know it is very simple but I wanna ask how to create div in ng-Repeat including an object proprty defines count of object.
For example i have an object like
function rowModel() {
this.id = 0;
this.columnCount = 1;
}
And I filled an array like below
$scope.Rows = [];
$scope.AddRow = function() {
var newRow = new rowModel();
newRow.id = 1;
newRow.columnCount = 3;
$scope.Rows.push(newRow);
}
I just wanna create an html template including 3 divs in each row.
This is my html and I wanna duplicate .cell div 3 times which is defined in object model
<button class="button" ng-click="AddRow()">Satır Ekle</button>
<div class="row cells{{row.columnCount}} bg-cyan" ng-repeat="row in Rows">
<div class="cell" ng-repeat="column in row.columnCount">{{row.id}}</div>
</div>
Anyone help?
Thanks

Answer 1

Use the following code in your controller
$scope.getNumber = function(num) {
return new Array(num);
}
And use the following in your view
<button class="button" ng-click="AddRow()">Satır Ekle</button>
<div class="row cells{{row.columnCount}} bg-cyan" ng-repeat="row in Rows">
<div class="cell" ng-repeat="column in getNumber(row.columnCount) track by $index">{{row.id}}</div>
</div>
Also if you do not want touch controller you can do this
ng-repeat="_ in ((_ = []) && (_.length=row.columnCount) && _) track by $index"
Here is the post where I found it.

Answer 2

i would create a filter for this
angular.module('myApp')
.filter('range', function(){
return function(n) {
var res = [];
for (var i = 0; i < n; i++) {
res.push(i);
}
return res;
};
});
After that, on the view is possible to use like this:
<div class="cell" ng-repeat="column in row.columnCount | range">{{row.id}}</div>