隐藏值输入时，它的零角度的js [英] Hide Value in input when it's zero in angular Js

问题描述

我有一个角度对象item.add_value = 0绑定到

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" />

为了做计算我必须使用类型=数字不是type =文本

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

然后我的问题是如何隐藏输入的内容时的值是0？

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

推荐答案

最简单的（和最古怪的）的方式来做到这一点是使用... CSS！试想一下：

The simplest (and the weirdest) way to do it is to use ... CSS! Consider this:

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

和CSS：

.zero {
   text-indent: -7px;   
}

不知道这将是适合你，但是这绝对是乐趣，如果您的字体大小和输入填充调整缩进可以正常工作。

Not sure it will be appropriate for you, but this is definitely fun and can work if you adjust indent for your font size and input padding.

UDP 。还有一个版本使用指令：

UDP. One more version using directive:

.directive('hideZero', function() {
    return {
        link: function(scope, element) {
            element.on('input change', function() {
                if (this.value === '0') {
                    this.value = '';
                }
            })
        }
    };
});

和使用它像：

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

这篇关于隐藏值输入时，它的零角度的js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！