Steven Wade Steven Wade - 2 months ago 16
AngularJS Question

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

This is what I see:

The value is set at

, but displays as

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

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


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="{{ | 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);


<script src=""></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>