Print Number in Given Format

Question

I am trying to print numbers from 0 to 24 mod 12 using ng-repeat. But I want the numbers to be displayed as

00 01 02 03 04 .... 11 00 01 02 ... 11

and not

0 1 2 3... 11 0 1 2 .... 11

Can this be done in angular ?

Answer 1

You could define a 'zeroPad' filter, like this:

angular.module('myModule', [])
    .filter('zeroPad', function () {
        return function (n, length) {
            var num = parseInt(n, 10);
            length = parseInt(length, 10);
            if (isNaN(num) || isNaN(length)) {
                return n;
            }
            num = '' + num;
            while (num.length < length) {
                num = '0' + num;
            }
            return num;
        };
    });

And then use it in your view this way:

{{ myNumber | zeroPad: 2 }}

Answer 2

Here what I have done for you: http://plnkr.co/edit/BlodIO1TvG3uGzncjM75?p=preview

Make a custom filter option like this:

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

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';

      $scope.numbers = [];

      for (var i = 1; i < 24; i++)
        $scope.numbers.push(i);
    });


    app.filter('padding', function() {
      return function(input) {
        var n = input;
        return (n < 10) ? '0' + n : n;
      }
    });

And in HTML page:

<ul>
  <li ng-repeat="number in numbers">
    {{number % 12 | padding}}
  </li>
</ul>

Please mark as answer if it answers your question

Answer 3

Minimum code with _.str angular padding filter:

jsFiddle

<div ng-app="app" ng-controller="PadController">
   <div ng-repeat="num in nums">{{ num | _.str: 'pad':[2, '0'] }}</div>
</div>

angular.module('app', ['underscore.string']).controller('PadController', function ($scope) {
    $scope.nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
});