Text one, two three etc in Angular automatically

Question

I have the following snippet of code that creates 1, 2, 3 etc based on the number in parent repeat (All good).

{{$index+1}}

But I am looking for Text such as One, Two Three etc

Is there a way to achieve this in Angular? (Text instead of numerics)

Answer 1

One solution is to create a filter, for example:

// Script.js
angular.module('app')
    .filter('numberToWord', function() {
        return function( s ) {

            var th = ['','thousand','million', 'billion','trillion'];
            var dg = ['zero','one','two','three','four', 'five','six','seven','eight','nine']; 
            var tn = ['ten','eleven','twelve','thirteen', 'fourteen','fifteen','sixteen', 'seventeen','eighteen','nineteen'];
            var tw = ['twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];

            s = s.toString(); 
            s = s.replace(/[\, ]/g,''); 
            if (s != parseFloat(s)) return 'not a number'; 
            var x = s.indexOf('.'); 
            if (x == -1) x = s.length; 
            if (x > 15) return 'too big'; 
            var n = s.split(''); 
            var str = ''; 
            var sk = 0; 
            for (var i=0; i < x; i++) 
            {
                if ((x-i)%3==2) 
                {
                    if (n[i] == '1') 
                    {
                        str += tn[Number(n[i+1])] + ' '; 
                        i++; 
                        sk=1;
                    }
                    else if (n[i]!=0) 
                    {
                        str += tw[n[i]-2] + ' ';
                        sk=1;
                    }
                }
                else if (n[i]!=0) 
                {
                    str += dg[n[i]] +' '; 
                    if ((x-i)%3==0) str += 'hundred ';
                    sk=1;
                }

                if ((x-i)%3==1)
                {
                    if (sk) str += th[(x-i-1)/3] + ' ';
                    sk=0;
                }
            }
            if (x != s.length)
            {
                var y = s.length; 
                str += 'point '; 
                for (var i=x+1; i<y; i++) str += dg[n[i]] +' ';
            }
            return str.replace(/\s+/g,' ');
        };
    })

And then you can use it like this:

{{$index | numberToWord }}

Edit: An example Plunker http://plnkr.co/edit/DIQ3YVkH7N6PUaqju82X?p=preview

Answer 2

There is no standard feature in Angular for that. Here is a link to a great algorithm to convert number to word Developers blog - Convert Numbers into Words Using JavaScript

Put the algorithm in a function and use it like this :

{{convertNumberToWord($index+1)}}

Here is a working example in Plunker for your situation