AngularJS ng-repeat with given number of loops from input form

Question

First of all I've got an ng-model where you select a number of entries from a html number input type, then I want to use this selection to produce a loop with ng-repeat and create other input forms.

The code starts like this:

<div data-ng-app="myapp" data-ng-init="entries=0" class="form-group" style="width: 300px;height: 100px;">
        <label for="input_nr">Input:</label>
        <input type="number" ng-model="entries" class="form-control" id="input_nr" min="0" step="1" value="0">
        </br>            
            <ul>
                <li ng-repeat="{{$entries}}"><span>hello</span></li>
            </ul>
    </div>

My $scope.myNumber should be equal to the value stored in "entries" from the ng-model. Please give me some advices.

I attach a JSFiddle. http://jsfiddle.net/CasianS/vaf44jwz/ .

So if I select 9 (exemple) I want to display 9 times "hello".

Answer 1

EDIT: Seeing the fiddle the OP just provided, I have a better understanding of the situation. What you want is html something like this:

<h3>ng-repeat example</h3>
<div ng-app ng-controller="MyCtrl">
<label for="input_nr">Input:</label>
<input type="number" ng-model="entries" ng-change="upateEntries()" class="form-control" id="input_nr" min="0" step="1" value="0">
</br>
<ul>
    <li ng-repeat="item in items track by $index">{{item}}</li>
</ul>

And the Javascript something like this:

var m = 'hello'

function MyCtrl($scope) {
    $scope.entries = 0;
    $scope.items = [];
    $scope.upateEntries = function () {
        $scope.items = [];
        for (var i = 0; i < $scope.entries; i++) {
            $scope.items.push(m);
        }
    }
}

(more or less). As noted in the comments, ng-repeat is a lot like a foreach loop. It's just going to iterate over an object or an array. See https://docs.angularjs.org/api/ng/directive/ngRepeat

This approach sets up a method that fires when the input changes and adds the required item to an array a specified number of times, and the ng-repeat iterates over that item. Note that you can't have duplicates in an ng-repeat, so you have to add the track by $index statement if you go use a strategy like this.

Fiddle: https://jsfiddle.net/Cavanaghacea/19x5mmum/12/

//OLD ANSWER BELOW

You should be able to use a limitTo: filter - like this:

<div ng-app="myapp">
      <div ng-controller="ctrlParent">
          <ul>
              <li ng-repeat="entries" | limitTo:$scope.myNumber><span>{{$index+1}}</span></li>
          </ul>

      </div>
</div>


    <script>
        var app = angular.module('myapp',[]);
        app.controller('ctrlParent',function($scope){
            $scope.myNumber = 3;
            $scope.getNumber = function(num) {
                return new Array(num);   
            }
        });
    </script>