CODEWITHSUNDEEP
angularjs
belayetHossain
belayetHossain

Reputation: 3

Angular how to display number always with 4 decimal places in <input>

I have a float value for the ng-model that I would like to always display with 4 decimal places in the <input>:

<input type="number" name="myDecimal"  ng-model="myDecimal | number : 4"  />

Upvotes: 0

Views: 2900

Answers (3)

CapeAndCowl
CapeAndCowl

Reputation: 370

Your code will not work because of nonAssign error. You can read more about it here and here.

You can use the curly braces notation to truncate the decimals. {{ myDecimal | number: 4 }}

Please note that the number filter does not really truncate the decimal places but rounds-off the number to those many decimal places.

In short, you cannot use type=number and a filter in ng-model as per the code you have shared.

If you necessarily have to use the number type, then I would suggest to round off the value before putting it in the input box.

Upvotes: 0

gaurav bankoti
gaurav bankoti

Reputation: 224

You can use value attribute of input type.

<input type="number" name="myDecimal"  ng-model="myDecimal" value="myDecimal | number : 4" />

Upvotes: 0

Vivz
Vivz

Reputation: 6620

You can use ng-currency to handle decimal points. You can use fraction to determine the number of decimal places. By default it is 2.

For more details ng-currency

var app = angular.module('plunker', ['ng-currency']);

app.controller('ApplicationController', function($scope) {
  $scope.amount = 0.431264;
});
    <!doctype html>
    <html ng-app="plunker">
    <head>
      <meta charset="utf-8">
      <title>AngularJS Plunker</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-currency/1.2.3/ng-currency.js"></script>
      <script src="app.js"></script>
    </head>
    <body>
      <div class="container" ng-controller="ApplicationController">
          <div class="row">
            <input type="text" 
                   ng-model="amount"
                   currency-symbol=""
                   ng-currency 
                   fraction="4" />
          </div>
      </div>
    </body>
    </html>

Upvotes: 1

Related Questions