angularjs - Hide Value in input when it's zero in angular Js

Question

I have an angular object item.add_value = 0 bind into the

<input type="number" ng-model="item.add_value"   ng-change="sumUp(item)" min="0" max="10000000000" />

In order to do the calculation I have to use type="number" not type="text"

Then my question is how to hide the content of the input when the value is 0?

Answer 1

I just had this same problem and found a way to fix/improve on @dubadub's answer, so I'm sharing my version of his directive:

.directive('hideZero', function() {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$formatters.push(function (inputValue) {
                if (inputValue == 0) {
                    return '';
                }
                return inputValue;
            });
            ngModel.$parsers.push(function (inputValue) {
                if (inputValue == 0) {
                    ngModel.$setViewValue('');
                    ngModel.$render();
                }
                return inputValue;
            });
        }
    };
})

You just use it by adding the hide-zero attribute to your inputs.