How to set default decimal value to input in angularjs

Question

I want to bind input value 0.00 to text box then, if I changed input to 20 then on blur set 20.00

<input type="text" valid-decimal-number style="text-align:right"  ng-model="Amount"  ng-blur="ConvertToDecimal(Amount)">

angular script :

//converting value to decimal
$scope.ConvertToDecimal = function (val) {
   $scope.Amount = eval(val).toFixed(2);
}

I am getting by using this code but, for every time I'm writing, how to create custom directive for this

I tried like this also but not working.

<input type="text" valid-decimal-number style="text-align:right"  ng-model="Amount"  ng-blur="'Amount=(Amount).toFixed(2)'">

i have tried removing that also, text box becoming empty after blur event — Srinu
– Srinu, Commented Aug 8, 2017 at 9:08

Sachila Ranawaka · Accepted Answer · 2017-08-08 09:17:44Z

1

use a filter in ng-blur

ng-blur="Amount = (Amount | number : 2 )"

Demo

angular.module("app",[])
.controller("ctrl",function($scope){


})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <input type="text" style="text-align:right"  ng-model="Amount" ng-blur="Amount = (Amount | number : 2 )" >

</div>

answered Aug 8, 2017 at 9:17

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Srinu Over a year ago

Thank you sachila , its worked.Is it possible to create custom directive for this

phani indra · Accepted Answer · 2017-08-08 09:25:01Z

1

You can apply toFixed(2) to numbers only

<html ng-app="myApp">
<head>
	<title></title>
</head>
<body ng-controller="myCtrl">
<input type="text" valid-decimal-number style="text-align:right"  ng-model="Amount"  ng-blur="ConvertToDecimal()">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.ConvertToDecimal = function (val) {
	if(isNaN($scope.Amount)){
		alert("given input is not a number");
		return;
	}
        $scope.Amount = Number($scope.Amount).toFixed(2);
    }
}]);
</script>
</body>
</html>

answered Aug 8, 2017 at 9:25

phani indra

2531 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to set default decimal value to input in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related