Range of numbers in AngularJS not rendering with variable

Question

I can already render a list of numbers in angular using the following code in my controller

$scope.range = function(n) {
 return new Array(n);
};

and I use it like so

<ul>
  <li class="ticked" ng-repeat="a in range(10) track by $index">{{$index + 1}}</li>
</ul>

and it draws 10 pretty

<li>1</li> 
...
...
<li>10</li>

as expected

Now I when I am trying to use this code with a scope variable instead of ten i.e

item.itemTickCount

If I output {{item.itemTickCount}} I see 13 but when I try to render

<ul>
  <li class="ticked" ng-repeat="a in range(item.itemTickCount) track by $index">{{$index + 1}}</li>
</ul>

I just get 1 <li></li> when it should be 13

What am I doing wrong.

Note I have already tried

range(itemTickCount)
range({{item.itemTickCount}})

I cannot reproduce your problem. see embed.plnkr.co/7xenEAclUTOUPNDl6e6c , range with a custom variable. Also, I have never heard of track by syntax, AngularJS marks this as an error so I removed it. idk. — phil294
– phil294, Commented May 7, 2017 at 23:50
Thanks for the level of effort. I will try this tomorrow when back in front of laptop — MOLEDesign
– MOLEDesign, Commented May 7, 2017 at 23:52
your item.itemTickCount is probably a string, but should be an integer. — logee
– logee, Commented May 8, 2017 at 0:06

charlietfl · Accepted Answer · 2017-05-08 02:11:42Z

1

You are passing a string....cast it to number

$scope.range = function(n) {       
    return new Array(+n||0);
};

answered May 8, 2017 at 2:11

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

2 Comments

DOH! I exposed the JSON and you are correct! "itemTickCount" : "13", changing the function to yours and it now works fine

note what happens though if you enter decimal like 11.2 ... might need some fine tuning for validation/rounding