AngularJS formatter - how to display blank instead of zero

Question

Please see this previous question: Format input value in Angularjs

The issue I am having is that (as is the case in the fiddle in the answer to the question above, i.e. http://jsfiddle.net/SAWsA/811/), hitting backspace on a single number remaining in the input leads to a zero appearing rather than clearing the input.

Fiddle directive code:

fessmodule.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;


            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });


            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter('number')(plainNumber));
                return plainNumber;
            });
        }
    };
}]);

I would appreciate any suggestions for how to alter the directive in the fiddle so that you don't have to hit backspace twice to clear the input.

a tad confusing. i would refphrase. this your question is being examined for closing for being too vague or offtopic. — tony gil
– tony gil, Commented Sep 1, 2014 at 14:15
I have edited the question to try to make it clearer. In truth this would have been better as a comment to the previous question but I did not have enough to rep to comment on that question. I will go back and add an answer to the previous question with a link to the fiddle provided by wickY26. — Andrew
– Andrew, Commented Sep 2, 2014 at 2:15

Poyraz Yilmaz · Accepted Answer · 2014-09-01 08:44:50Z

1

you can simply put an if-else condition to your directive and it is done...

        ctrl.$parsers.unshift(function (viewValue) {
            console.log(viewValue);
            if(viewValue){
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter('number')(plainNumber));
                return plainNumber;
            }else{
                return '';
            }
        });

here is working JSFIDDLE

answered Sep 1, 2014 at 8:44

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

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

1 Comment

Andrew Over a year ago

Thanks @wickY26! I had tried a simple if but obviously missed something.

Collectives™ on Stack Overflow

AngularJS formatter - how to display blank instead of zero

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related