Angularjs - How to 'ng-repeat' a div for 'value in ng-model'-times?

Question

Using Angularjs, I want to create say 10 <div> if user inputs '10' in a text box.

<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols"/>

So whatever value user enters in this box, those many shall be created. So my generalized question is, how to 'ng-repeat' a <div> for 'ng-model' times?

UPDATE: Appreciating for all of your answers, I did something like following, by referring your answers. And that is working as of now, but tell me if any other logic is more efficient than this.

$scope.divs = new Array();

    $scope.create=function(){ //I added a button & invoked this function on its ng-click
            var a = $scope.cols;
            for(i=0;i<a;i++)
            {
                $scope.divs.push(a);
            }
            alert($scope.divs);
        };

possible duplicate of [ng-repeat defined number of times instead of repeating over array?](http://stackoverflow.com/questions/16824853/ng-repeat-defined-number-of-times-instead-of-repeating-over-array) — Stewie, Jan 02 '14 at 12:04

Alborz · Answer 1 · 2014-01-02T21:45:35.613

12

You need to create an array to iterate on it. In your controller:

app.controller('ctrl', function ($scope) {
    $scope.cols = 0;
    $scope.arr = [];
    $scope.makeArray = function () {
        $scope.arr.length = 0;
        for (var i = 0; i < parseInt($scope.cols) ; i++) {
            $scope.arr.push(i);
        }
    }
});

In your view:

<div ng-controller="ctrl">
    <input ng-model="cols" type="text" ng-change="makeArray()" />
    <div ng-repeat="o in arr">hi</div>
</div>

JSFiddle

edited Jan 02 '14 at 21:45

answered Jan 02 '14 at 11:46

Alborz

6,843
3
22
37

Hey I tried this. But The input box goes disabled. I can't put a value in it – Sujit Y. Kulkarni Jan 02 '14 at 12:17
1

Sorry. I have edited my sample. you can check the jsfiddle link. – Alborz Jan 02 '14 at 21:32

Rob Sedgwick · Answer 2 · 2014-01-02T12:49:49.090

6

DEMO: http://jsfiddle.net/JsFUW/

In your module/app/controller

$scope.cols =4; /* a default */
$scope.divs =[]; /* whatever these are */

In the template

<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols"/>

  <div ng-repeat="div in divs | limitTo:cols" >
    ... 
  </div>

As comment question , try this :

In the controller

  $scope.cols

In the template

 <input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols"/>

 <h3>cols: {{cols}} </h3>

Do you see that value change on the page as you type ? If not your $scope.cols is not in the template scope.

edited Jan 02 '14 at 12:49

answered Jan 02 '14 at 11:43

Rob Sedgwick

5,216
4
20
36

1

H i Sujit, updated the answer with some troubleshooting, and a link to a working example. – Rob Sedgwick Jan 02 '14 at 12:50

score 1 · Answer 3 · answered Jan 02 '14 at 21:00

In your view:

<input ng-model="cols" ng-change="colsChanged()"/>

<div ng-repeat="item in items track by $index">{{$index}} {{item}}</div>

In your controller:

app.controller('MyCtrl', function($scope) {
  $scope.cols = 0;
  $scope.colsChanged = function () {
     $scope.items = new Array(+$scope.cols);
  };

  //optional: if you're starting with 1 or more "cols"
  $scope.colsChanged();
});

Alternatively, you could roll your own directive that used transclusion to repeat itself multiple times, but that could get involved and probably isn't going to gain you much.

Angularjs - How to 'ng-repeat' a div for 'value in ng-model'-times?

3 Answers3