How to display counter value as 2 digits in Angularjs?

Question

I am using angularjs timer to build a countdown display.

The timer directive returns value of hours, minutes and seconds as integer. Means, 1,2,3,.... But I want to display these values as 2 digits. like, 01,02,03,04,......

Is there any filter or directive to accomplish this?

wth193 · Accepted Answer · 2017-11-24 04:23:18Z

7

I would like to create a simple custom AngularJS filter.

Filters are used for formatting data displayed to the user.

Usage

{{value | counterValue}}

Filter

app.filter('counterValue', function(){
   return function(value){
     value = parseInt(value);
      if(!isNaN(value) && value >= 0 && value < 10)
         return "0"+ valueInt;
      return "";
   }
})

edited Nov 24, 2017 at 4:23

wth193

566 bronze badges

answered Jul 8, 2015 at 15:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Andreas Grünh · Accepted Answer · 2015-07-08 16:46:14Z

1

The alternative to the filter would be the custom directive:

Usage

<li ng-repeat="item in array">
    <digit content="item"></digit>
</li>

Directive

.directive('digit', function () {
    return {
        restrict: 'E',
        scope: {
            content: '='
        },
        link: function (scope) {
            if (scope.content < 10) {
                scope.zero = "0";
            } else {
                scope.zero = "";
            }
        },
        transclude: true,
        template: '{{zero}}{{content}}'
    };
});

answered Jul 8, 2015 at 16:46

Andreas Grünh

3361 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to display counter value as 2 digits in Angularjs?

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