AngularJS - Loop data with dynamic total number

Question

I try to create a input number that provided total number for loop my span tag like

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range:{{number}}"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

And here is my JS

var app = angular.module('myApp', []);

function myCtrl($scope){
}    

app.filter('range', function() {
  return function(val, range) {
    range = parseInt(range);
    for (var i=0; i<range; i++)
      val.push(i);
    return val;
  };
});

But that's not working. How to do that thanks

ryeballar · Accepted Answer · 2014-08-01 17:03:39Z

5

You don't have to interpolate {{number}} inside the ng-repeat directive, you can directly use it as it is.

change:

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range:{{number}}"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

to:

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range:number"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

answered Aug 1, 2014 at 17:03

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aditya Singh · Accepted Answer · 2014-08-01 17:07:57Z

1

Replace the expression {{number}} with the model number in the range filter. Updated code:

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range: number"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

answered Aug 1, 2014 at 17:07

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

Collectives™ on Stack Overflow

AngularJS - Loop data with dynamic total number

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related