自定义过滤器来隐藏负值 [英] custom filter for hiding the negative values

问题描述

我有一个文本框，如果ng模型包含负值，我不想在文本框中显示任何内容，并且我想按照原样离开ng模型。如果数据是负值，它不应该显示数据。如果值是负数，那么我想在文本框中显示空白，但ng模型应该包含该负值。我需要一个自定义过滤器来实现此功能

Plunker

 < input type =textng-model =number>< / input> 
  

解决方案

可以在AngularJS中添加过滤器来格式化数据。

现在，如果你正在考虑用文本框'绑定' ngModel 并且想对其应用过滤器（即标记：< input ng-model =如果你在中检查它，你将会得到下面的错误：小提琴

错误：不可分配的模型表达式：number | nonNegative（）

当你想显示下面的值时，使用过滤器，你就可以这样做。 p>



  angular.module（'myApp'，[]）
 .controller（'LoginController'，function（$ scope）{ 
 $ scope.number = -10; 
 $ scope.number1 = -20; 
 $ scope.number2 = 30; 
}）
 .filter（'nonNegative '，函数（）{
返回函数（val）{
 if（val> = 0）返回val; else''; 
} 
}）
  
 
 $ b $ p $ 号码：{{number | nonNegative}} 
< br />> 
 Number1：{{number1 | nonNegative}} 
< br />> 
 Number2：{{number2 | nonNegative}} 
  

----编辑-----

Even当使用 $ watch 时，实际值将会不同，文本框中的值将会不同。

请检查小提琴

  angular。 module（'myApp'，[]）
 .controller（'LoginController'，function（$ scope）{
 $ scope.number1 = -20; 
 
 $ scope。$如果（newVal <0）newVal =''; 
}）
}）
 ）  
 $ b 
 HTML 
 app =myAppng-controller =LoginController> 
< input type =textng-model =number1/> 
< input type =submitng-click =login（）value =Login/> 
< br /> 
 Number1：{{number1 | nonNegative}} 
< / div> 
  

数字字段没有值，就像你在小提琴中看到的一样，但是文本框仍然显示负值


I have a text box, I want to show nothing in the text box if the ng-model contains negative value, and I want to leave ng-model as it is. And it should not display the data if the data is negative value,If the value is negative then I want to show the empty in text box, but the ng-model should contain that negative value. I need a custom filter to achieve this functionality

Plunker

<input type = "text" ng-model="number"></input>

解决方案

Filters can be added in AngularJS to format data.

Now, if you are thinking to 'bind' ngModel with the text-box and want to apply filter on it (i.e. markup: <input ng-model="number | nonNegative" />), try-it yourself, you'll get the below error, when you check it in fiddle

Error: Non-assignable model expression: number | nonNegative ()

When you want to show the values are below, using filter, you'll be able to do so.

angular.module('myApp', [])
.controller('LoginController', function ($scope) {
    $scope.number = -10;
    $scope.number1 = -20;
    $scope.number2 = 30;
})
.filter('nonNegative', function(){
  return function(val){
     if(val >= 0) return val; else '';
  }
})

HTML:

Number: {{number | nonNegative}}
<br/>
Number1: {{number1 | nonNegative}}
<br/>
Number2: {{number2 | nonNegative}}

----EDIT-----
Even when you use $watch, the actual value will be different and the value in the textbox will be different.
Check this fiddle

angular.module('myApp', [])
.controller('LoginController', function ($scope) {
  $scope.number1 = -20;

  $scope.$watch('number1', function(newVal, oldVal) {
    if(newVal < 0) newVal = '';
  })
})

HTML

<div ng-app="myApp" ng-controller="LoginController">
    <input type = "text" ng-model="number1" />
    <input type="submit" ng-click="login()" value="Login" />
<br/>
Number1: {{number1 | nonNegative}}
</div>

The number field is having no value, as you see in the fiddle, but still the textbox displays negative value

这篇关于自定义过滤器来隐藏负值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！