Angularjs 输入时隐藏值'；角为零

我有一个角度对象项。将_值=0绑定到

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

为了进行计算，我必须使用type=“number”而不是type=“text”

---

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

您可以使用

ng show

或

ng hide

，具体取决于您想要的语义

我建议您这样做，因为我认为这更直观、更具语义：

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

var-app=angular.module（'app'，[]）；
app.controller（'firstCtrl'，函数（$scope）{
$scope.item={
添加值：0
};
$scope.$watch（'item.add_value'，function（）{
如果（$scope.item.add_value==0）{
$scope.item.add_value=“”；
}
});
});

最简单（也是最奇怪）的方法是使用。。。CSS！考虑这一点：

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

不确定它是否适合您，但如果您根据字体大小和输入填充调整缩进，这肯定很有趣，而且可以工作

演示：
UDP。使用指令的另一个版本：

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

.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;
            });
        }
    };
})

然后像这样使用它：

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



演示：我认为，最好的方法是使用
ngModelController
，因为它不使用DOM（我们只是在数据层，不在视图中，我们需要像往常一样绑定，除了0），而且非常简单。它有助于以我们需要的方式调整模型和视图之间的绑定：

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

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

app.directive('hideZero', function() {
    return {
        require: 'ngModel',
         link: function(scope, element, attrs, modelCtrl) {

           modelCtrl.$parsers.push(function (inputValue) {

             if (inputValue === 0) {
               return '';
             }         

             return inputValue;         
           });
         }
    }
});

看更多

工作冲击器。
实际上最简单的解决方案是将最小值设置为>0，比如10

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



我刚刚遇到了同样的问题，并找到了一种方法来修复/改进@dubadub的答案，因此我将分享我对他的指令的版本：

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

.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;
            });
        }
    };
})

您只需将
hide zero
属性添加到输入中即可使用它。
我将其设为字符串，但在计算时对其进行解析：

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

但是如果你不隐藏，它会隐藏整个输入，对吗？我只想隐藏0值。加上“ng if”后，我的计算不起作用，我想这会重新创建一个对象，让item.add\u的值丢失refferece@Ricc对，它会隐藏整个输入元素。你说只隐藏零值是什么意思？我认为正确的解决方案，是为了在执行计算时捕获错误。在JavaScript中将字符串转换为数字非常简单。至于你的第二个问题：我认为这不是一个好主意。如果它等于零，为什么不显示值？是的，这就是为什么我说这是最简单的方法。如果不是凌晨1点，我会尝试使用
$parsers
和
$formatters
生成一个指令。这就是您应该如何尝试解决这个问题的方法。@Ricc这里有一个更简单的自定义指令版本：我不太确定语法，但在指令中是隐藏零，但在指令中是调用'hideZero'？那么，大写字母和自动分隔单词的指令是什么呢？是的，在HTML中使用snake-case，但在javascript中它被翻译成camelCase。你介意帮我回答这个问题吗@Ricc您可以使用
$scope.$watch
谢谢您的回答，但我认为@dfsq的解决方案正是我试图得到的，urs有点相反您介意帮我回答这个问题吗？这是更好的解决方案，因为光标保持不变（设置文本缩进，则光标将丢失），并且不修改实际值（我们只想更改显示的是was，而不是基础模型）。
var getRealValue = function(val){
    if(val === ''){
        return 0;
    }else{
        return parseFloat(val);
    }
};
$scope.sumUp = function(val){
   $scope.total = getRealValue(val);
};