当角度 Js 为零时隐藏输入中的值

Question

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

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

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

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

Answer 1

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

.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 属性即可使用它。

Answer 2

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

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

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

演示：http://plnkr.co/edit/2gRzdY7DVwrPdNGoD0Fq?p=preview

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

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

演示：http://plnkr.co/edit/nrE3vEW2NSuLYeZuKIjO?p=preview

Answer 3

我认为，最好的方法是使用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;         
           });
         }
    }
});

查看更多https://docs.angularjs.org/api/ng/type/ngModel.NgModelController。

工作的笨蛋http://plnkr.co/edit/Zatou8lLx23xwXd1x9hd?p=preview.

Answer 4

您可以使用ng-show 或ng-hide，具体取决于您想要的语义。

我会推荐ng-hide，因为在我看来它更直观和语义化：

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

但你可以使用：

ng-show:

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

Answer 5

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

app.controller('firstCtrl', function($scope) {

  $scope.item = {
    add_value: 0
  };

  $scope.$watch('item.add_value', function() {
    if ($scope.item.add_value === 0) {
      $scope.item.add_value = "";

    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

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


  </div>
</div>

Answer 6

实际上最简单的解决方案是将最小值设置为 > 0，比如 10？

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

Answer 7

我让它是字符串，但在计算时解析它：

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

JS：

var getRealValue = function(val){
    if(val === ''){
        return 0;
    }else{
        return parseFloat(val);
    }
};
$scope.sumUp = function(val){
   $scope.total = getRealValue(val);
};