web-dev-qa-db-fra.com

Angular comment afficher le nombre toujours avec 2 décimales dans <entrée>

J'ai une valeur flottante pour le modèle ng que je voudrais toujours afficher avec deux décimales dans le <input>: 

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

Cela fonctionne dans la plupart des cas lorsque "myNumb" a un nombre décimal. Mais il ne forcera pas l'affichage des 2 décimales si "myNumb" a moins de 2 décimales (3.2), ou un entier (30).
Comment puis-je forcer l'affichage de deux décimales dans le champ <input>

angularjs
51
WABBIT0111

AngularJS - Entrez un nombre avec 2 décimales cela pourrait aider ... Filtration:

  1. Définissez l'expression régulière pour valider l'entrée à l'aide de ng-pattern. Ici, je veux accepter uniquement les nombres avec un maximum de 2 décimales et un séparateur de points.
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal | number : 2" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />

La lecture suivante a été indiquée lors de la réponse suivante ng-model = "myDecimal | number: 2" .

60
DIEGO CARRASCAL
{{value | number : fractionSize}}

comme {{12.52311 | number : 2}}

donc ceci va imprimer 12.52 

31
Ashish Mukarne

Avez-vous essayé d'utiliser le filtre 

<input ng-model='val | number: 2'>

https://docs.angularjs.org/api/ng/filter/number

26
Valter

Si vous utilisez Angular 2 (apparemment, cela fonctionne aussi pour Angular 4 également), vous pouvez utiliser ce qui suit pour arrondir à deux décimales{{ exampleNumber | number : '1.2-2' }}, comme dans 

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

PANNE

'1.2-2' signifie {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}:

  • Un minimum de 1 chiffre sera affiché avant le point décimal
  • Il montrera au moins 2 chiffres après le point décimal
  • Mais pas plus de 2 chiffres

Crédit dû ici et ici

16
maudulus

Un autre raccourci pour (la réponse de @ maudulus) pour supprimer {maxFractionDigits} puisqu'il est facultatif.

Vous pouvez utiliser {{numberExample | number : '1.2'}}

3
Tatarin

le meilleur moyen d’arrondir le nombre en décimales est que 

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

par exemple ;

numbertobeRound=58.8965896589;

si tu veux 58.90

décimalplaces est 2

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

Utilisez simplement le nombre pipe comme ceci:

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

Le tuyau ci-dessus fonctionne comme suit:

  • Afficher au moins 1 chiffre entier avant le point décimal, défini par défaut
  • Afficher pas moins de 2 chiffres entiers après le point décimal
  • Ne pas afficher plus de 2 chiffres entiers après le point décimal
0
Mwizak