Number filter filters number down to two decimals, but does not display it that way

Question

Number filter filters number down to two decimals, but does not display it that way

26.4k views Asked by swade At 25 November 2024 at 13:18

This is what I see:

The value is set at 160.90, but displays as 160.8999999999 etc.

<input class="form-control" ng-model="imprint.total" 
    value="{{imprint.total | number:2}}" readonly>

It goes through filtering of certain inputs to get that total, but essentially it's just a price multiplied to quantity.

Original Q&A

There are 3 answers

Shushanth Pallegar On 10 June 2015 at 15:21

use of custom filter , using toFixed method will restricts the No. of decimal values ,

App.filter('twoDecimal',function(input, scope){

return function(){

   return input.toFixed(2);

  }

})

rahul rathore On 09 March 2017 at 06:34

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = { name: ''};
});
app.directive('twoDecimal', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      
      ngModel.$formatters.push(function(value) {debugger
        return Math.round(value * 100) / 100;
      });
      
    }
  }
});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
  </head>

  <body  ng-app="app">
    <div ng-controller="MainCtrl">
    <input type="button" value="set to '12.23453'" ng-click="data.name='12.23453'"/>
    <input type="button" value="set to '34.3333'" ng-click="data.name='34.3333'"/>
    <input two-decimal ng-model="data.name" />
    <pre>model is: {{data.name}}</pre>
    </div>
  </body>

</html>

**PSL** · Accepted Answer · 2015-06-10 15:20:55

The value in the value attribute will be overridden by ng-model directive when it sets the viewvalue as it renders. You have a readonly textbox you could just as well remove the ng-model from it.

<input class="form-control" 
       value="{{imprint.total | number:2}}" readonly>

With ng-model and to format live data entry you would need to create a directive and use parsers/formatters to format the value.

angular.module('app', []).directive('format', ['numberFilter',
  function(numberFilter) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, elm, attr, ngModel) {
        var decPlaces = attr.format || 2;

        function formatter(value) {

          if (value) {
            return numberFilter(value, decPlaces);
          }
        }

        ngModel.$formatters.push(formatter);

      }
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="imprint=164.899999">
  <input class="form-control" value="{{imprint | number:2}}" readonly>

  <input class="form-control" ng-model="imprint" format="2" readonly>

</div>

TechQA.

Number filter filters number down to two decimals, but does not display it that way

There are 3 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-FILTER

Popular Questions

Popular Tags

Trending Questions