Loop up to number in angularjs

Question

I'm sure this is really simple, but I'm only just starting with angular. I have a property.price variable which is either 1, 2 or 3. I wish to display this as £, ££, or £££.

I can display "Price: 2" by going:

Price: {{ price = property.price}}

But I'm getting a bit confused.

<span ng-repeat="n in [] | range:property.price" >£</span>

Can you also post the code for your range filter? I am guessing your taking part of [this stack question](http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges), so the issue could be in the filter. — drew_w, Dec 27 '13 at 14:37
I believe this fiddle does what your looking for (http://jsfiddle.net/gwfPh/) - per another question. If you are still having issues after trying this, maybe update with a fiddle of your own : ) — drew_w, Dec 27 '13 at 14:42
Ahh, I googled how to do what I wanted, found and included the ng-repeat="n in [] | range:5" but managed to miss the whole filter bit! I'm an idiot. If you post an answer I'll mark it correct, or post a simpler way to display something object.x times! Thanks — Djave, Dec 27 '13 at 14:48

score 2 · Accepted Answer · answered Dec 27 '13 at 15:08

I created a fiddle that demonstrates what I think you are looking for here (http://jsfiddle.net/gwfPh/72/).

In this I put two variables in scope - amount and repeatCount, which display the amount and the number of times to repeat the pound symbol:

function Main($scope){
    // number of times to repeat
    $scope.repeatCount = 2;
    $scope.amount = 12.15;
}

The rest of this is a filter which appends the specified number of values to the array. In essence when placed in an ng-repeat this will cause the repeater to add that number of extra elements after the repeat has completed. Best of luck!

score 0 · Answer 2 · answered Dec 27 '13 at 14:52

You could use the filter mechanic, or you could create your own simple directive. Fiddle - http://jsfiddle.net/2MN5w/1/

<span repeat-by-integer="3">£</span>

myApp.directive('repeatByInteger', function () {
    return {
        link: function (scope, element, attr) {
            var times = parseInt(attr.repeatByInteger) - 1;
            var text = element.html();
            for (var i = 0; i < times; i++) {
                element.append(text);        
            }
        }
    };
});

Loop up to number in angularjs

2 Answers2