Create div with AngularJS

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

score 1 · Accepted Answer · edited May 23 '17 at 12:29

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.

score 0 · Answer 2 · answered Nov 06 '15 at 10:38

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>

Create div with AngularJS

2 Answers2