AngularJS - Comment appliquer la devise de filtre sur la zone de texte que je tape?
Mon projet a besoin de montrer montant de champ en format de devise. Je peux réaliser ce onblur
événement, mais laissez-moi savoir si cela peut être réalisé à l'aide de filtres ou de certains autres AngularJS technique.
J'ai le texte suivant zone de texte:
<input type="text" class="form-control" id="MyAmount" name="MyAmount" ng-model="MyAmount" />
Je veux convertir la valeur à l'intérieur de cette zone de texte pour suivre format de devise. Donc, si j'type de 200000, il convient de faire est de 200 000$.00 dès que je tape ou alors je suis en tapant.
J'ai utilisé la technique suivante et appliqué un filtre,
<input type="text" class="form-control" id="MyAmount" name="MyAmount" ng-model="MyAmount"
value="{{MyAmount | currency}}" />
mais il convertit uniquement pour la première clé de type I, comme il convertit 2 $à 2,00$, puis il efface la valeur (comme je suppose qu'il trouve cette mise à jour de la valeur que pas un nombre?)
Mise à jour: je suis capable de le formater en direct à l'aide d'un filtre personnalisé, mais que le filtre ne fonctionne pas correctement dans tous les cas, et quand j'ai enregistrer la valeur, j'obtiens des valeurs de $ et des virgules dans la quantité et non pas seulement la valeur numérique. Je vais essayer de plus.
OriginalL'auteur Pawan Pillai | 2014-05-21
Vous devez vous connecter pour publier un commentaire.
C'est plutôt une non-trivial problème.
Pour la partie principale de la fonctionnalité, vous devez utiliser
ngModelController
's$formatters
et$parsers
propriétés d'enregistrer des écouteurs pour gérer les changements dans$modelValue
et$viewValue
respectivement.Lorsque le
$modelValue
changements, vous avez besoin de filtrer à l'aide de lacurrency
filtre avant de l'afficher à la vue.Lorsque le
$viewValue
modifications, vous devez le convertir en un certain nombre (je pensais qu'elle fait plus de sens pour stocker la valeur de modèle en tant que nombre, non pas comme une chaîne formatée), filtre nombre à travers lecurrency
de filtre et de mettre à jour le$viewValue
(si nécessaire).Qui n'est pas particulièrement difficile. La partie délicate est que la mise à jour de la valeur de l'élément, déplace le curseur à la fin, donc vous avez besoin pour réactiver manuellement la position de l'accent circonflexe.
Ma tentative a abouti à la Directive suivante Objet de Définition
Voir, aussi, cette courte démo. Il n'est pas parfait, mais c'est un bon début.
BTW, j'ai "emprunté" la
get/setCaretPosition()
fonctions de AngularUI deuiMask
directive.Je ne comprends pas ce que tu veux dire. Je peux écrire n'importe quel nombre (par exemple: pour
$2,123.00
je place le curseur avant le séparateur décimal et le type2
,1
,2
,3
). Que voulez-vous dire exactement ? (Je suis également en utilisant la dernière version de Chrome sur Windows).Oui, si je place le curseur avant le séparateur décimal, il fonctionne parfaitement. Mais ma zone de texte sera initialement vide et je vais commencer à taper du vide. Dans votre démonstration, je peux commencer à partir de la valeur à blanc? Merci.
Tout est possible. Vous avez juste besoin de la mettre en œuvre 🙂 Vérifier mes mises à jour de violon. Comme je l'ai dit, il n'est pas une solution définitive, mais c'est un très bon déclarant point. Mais vous devrez le modifier en fonction de vos besoins spécifiques. (S'il vous plaît, n'oubliez pas d'accéder à la réponse si cela vous a aidé à résoudre votre problème.)
C'est la façon dont les choses fonctionnent 🙂 affecter une nouvelle valeur à la
$viewValue
ne définit pas automatiquement la valeur de l'élément. Normalement, vous auriez du appeler$render()
, mais c'est un cas particulier, parce que nous voulons capturer et de réinitialiser la position du curseur, nous avons donc à faire manuellement (ou de remplacer le contrôleur de$render()
méthode).OriginalL'auteur gkalpak
Vous pouvez également utiliser le fcsa-numéro de directive qui fournit automatiquement pour vous. C'est aussi facile que d'ajouter de la
fcsa-number
attribut à l'élément d'entrée.Et voici une démo
Le code source et la documentation est disponible sur GitHub: https://github.com/FCSAmericaDev/angular-fcsa-number
OriginalL'auteur Paul
J'ai le même problème lorsque vous essayez de construire une devise personnalisé directive. Donc, après le départ de nombreuses façons de résoudre j'ai trouvé le angulaire entrée-masques directives.
Soutien de verdure pour une installation rapide et utilisation suffit d'ajouter l'interface utilisateur de l'argent attribut de masque sur une entrée de l'élément de texte:
Également en charge des valeurs min et max de validation.
OriginalL'auteur allucardster