Angular как отображать число всегда с 2 десятичными знаками в <input>

У меня есть значение float для ng-модели, которое я бы всегда отображал с двумя десятичными знаками в <input>:

<input ng-model="myNumb" step ="0.01" type="number">

Это работает для большинства случаев, когда "myNumb" имеет десятичный знак. Но это не приведет к отображению двух десятичных знаков, если "myNumb" имеет менее 2 десятичных знаков (3.2) или целое число (30)
Как я могу заставить отображение 2 десятичных знаков в поле <input>

Ответы

Ответ 1

AngularJS - Введите номер с двумя десятичными знаками, это может помочь...  Фильтрация:

  1. Установите регулярное выражение для проверки ввода с помощью ng-pattern. Здесь я хочу принимать только числа с максимум двумя десятичными знаками и с разделителем точек.
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal | number : 2" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />

Прочитав это, был указан следующий ответ ng-model = "myDecimal | number: 2" .

Ответ 2

{{value | number : fractionSize}}

как {{12.52311 | number: 2}} {{12.52311 | number: 2}}

так что это будет печатать 12.52

Ответ 4

Если вы используете Angular 2 (очевидно, он также работает и для Angular 4), вы можете использовать следующее для округления до двух десятичных разрядов {{ exampleNumber | number: '1.2-2' }} {{ exampleNumber | number: '1.2-2' }}, как в:

<ion-input value="{{ exampleNumber | number : '1.2-2' }}"></ion-input>

СЛОМАТЬ

'1.2-2' означает {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}:

  • Минимум 1 цифра будет отображаться перед десятичной точкой
  • Он будет отображать как минимум 2 цифры после десятичной точки
  • Но не более 2 цифр

Кредит здесь и здесь

Ответ 5

Еще одно сокращение для (@maudulus answer) для удаления {maxFractionDigits}, поскольку оно необязательно.

Вы можете использовать {{numberExample | number : '1.2'}}

Ответ 6

Лучший способ округлить число до десятичных разрядов состоит в том, что

a=parseFloat(Math.round(numbertobeRound*10^decimalplaces)/10^decimalplaces);

например;

numbertobeRound=58.8965896589;

если хочешь 58.90

десятичных знаков 2

a=parseFloat(Math.round(58.8965896589*10^2)/10^2);

Ответ 7

Надеюсь, что это решит вашу проблему! https://github.com/kaushal2341/correctify-decimal-place-custom-directive/blob/master/decimalDirective.js

Здесь эта директива принимает только число и точку для текстового значения типа ввода, когда пользователь больше заданных десятичных разрядов не обновляется в представлении.

Ответ 8

Просто используйте номер трубы следующим образом:

{{ numberValue | number: '.2-2'}}

Труба выше работает следующим образом:

  • Показывать по крайней мере 1 целое число перед десятичной точкой, установленное по умолчанию
  • Показывать не менее 2 целых цифр после десятичной точки
  • Показывать не более 2 цифр после десятичной точки

Ответ 9

Используйте фильтр валют с пустым символом ($)

{{val | currency:''}}