htmlangularjsmetro-ui-css

Create div with AngularJS


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


Solution

  • 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.