Hide value on input when it is null in angular Js
I have an angular item.add_value = 0 bind in
<input type="number" ng-model="item.add_value" ng-change="sumUp(item)" min="0" max="10000000000" />
To do the calculation I have to use type = "number" not type = "text"
Then my question is how to hide the content of the input when the value is 0?
source to share
I had the same problem and found a way to fix / improve @ dubadub's answer, so I'm sharing my version of my directive:
.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;
});
}
};
})
You just use it by adding an attribute hide-zero
to your inputs.
source to share
The easiest (and weirdest) way to do this 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" />
and CSS:
.zero {
text-indent: -7px;
}
Not sure if this will be appropriate for you, but it's definitely fun and can work if you adjust the padding for font size and input.
Demo: http://plnkr.co/edit/2gRzdY7DVwrPdNGoD0Fq?p=preview
UDP . Another version using the directive:
.directive('hideZero', function() {
return {
link: function(scope, element) {
element.on('input change', function() {
if (this.value === '0') {
this.value = '';
}
})
}
};
});
and use it like:
<input type="number" ng-model="item.add_value"
ng-change="sumUp(item)"
hide-zero
min="0"
max="10000000000" />
Demo: http://plnkr.co/edit/nrE3vEW2NSuLYeZuKIjO?p=preview
source to share
I think the best approach is to use ngModelController
it because it doesn't use the DOM (we're just in the data layer, not the view, we need the binding as usual except 0) and is very simple. This helps to adjust the binding between the model and its view as we need it:
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;
});
}
}
});
More details https://docs.angularjs.org/api/ng/type/ngModel.NgModelController .
Working plunker http://plnkr.co/edit/Zatou8lLx23xwXd1x9hd?p=preview .
source to share
You can use ng-show
or ng-hide
depending on how you want to use the semantics.
I would recommend ng-hide because its more intuitive and semantic in my opinion:
<input type="number"
ng-hide="item.add_value == '0'"
ng-model="item.add_value"
ng-change="sumUp(item)"
min="0"
max="10000000000" />
but you can use:
ng-show
:
<input type="number"
ng-show="item.add_value != '0'"
ng-model="item.add_value"
ng-change="sumUp(item)"
min="0"
max="10000000000" />
source to share
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>
source to share
I give it a string, but parse it when calculating:
<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);
};
source to share