当角度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

＆＃13;

＆＃13;

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 = "";

    }

  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

实际上最简单的解决方案是将最小值设置为＆gt; 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);
};