Appliquer un filtre de devise au champ de saisie dans angularjs

Bonjour, lorsque j’utilise des balises span, je peux appliquer le filtre monétaire comme

  {{item.cost | currency}}

Je me demande comment appliquer le même filtre de devise dans la balise input. c’est à dire

Lorsque j’essaie d’appliquer un filtre de devise au champ de saisie ci-dessus, cela ne fonctionne pas. Faites-moi savoir comment appliquer le filtre de devise au champ de saisie. Merci

J’ai créé une directive simple qui gère le formatage des champs de saisie. Voici un exemple jsfiddle . Pour l’utiliser, ajoutez ceci à votre code existant.

Et ajoutez cette directive à votre code.

 // allow you to format a text input field. //  //  .directive('format', ['$filter', function ($filter) { return { require: '?ngModel', link: function (scope, elem, attrs, ctrl) { if (!ctrl) return; ctrl.$formatters.unshift(function (a) { return $filter(attrs.format)(ctrl.$modelValue) }); elem.bind('blur', function(event) { var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, ''); elem.val($filter(attrs.format)(plainNumber)); }); } }; }]);

Malheureusement, vous ne pouvez pas formater avec ng-model. Du moins pas comme ça. Vous devrez créer votre propre directive qui implémentera un parsingur et un formateur. Voici une question similaire .

Il y a une très bonne directive notre là-bas qui fait cela actuellement: ngmodel-format

     Example - example-example52-production       
 default currency symbol ($): {{amount | currency}} 
 custom currency identifier (USD$): {{amount | currency:"USD$"}}

Je pense que vous n’avez pas besoin d’appliquer le filtre dans votre saisie, car vous n’avez pas besoin de devise au format, consultez cette page https://docs.angularjs.org/api/ng/filter/currency c’est l’aide officielle pour le filtre de monnaie angular.

Si vous utilisez bootstrap, vous pouvez utiliser l’un de ces contrôles http://getbootstrap.com/components/#input-groups-basic J’espère que cette aide est disponible.

Vous pouvez créer une directive et appliquer un formatage sur la valeur et sur le flou, vous pouvez définir cette valeur formatée à saisir.

  angular.module('app', []) .controller('myCtrl', function($scope) { $scope.amount = 2; }) .directive('formatToCurrency', function($filter){ return { scope: { amount : '=' }, link: function(scope, el, attrs){ el.val($filter('currency')(scope.amount)); el.bind('focus', function(){ el.val(scope.amount); }); el.bind('input', function(){ scope.amount = el.val(); scope.$apply(); }); el.bind('blur', function(){ el.val($filter('currency')(scope.amount)); }); } } });

lien http://jsfiddle.net/moL8ztrw/3/

J’ai écrit cette directive et cela m’a aidé à formater les valeurs monétaires. J’espère que ça aide quelqu’un.

 .directive('numericOnly', function(){ return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { var regex = /^[1-9]\d*(((.\d{3}){1})?(\,\d{0,2})?)$/; modelCtrl.$parsers.push(function (inputValue) { var transformedInput = inputValue; if (regex.test(transformedInput)) { console.log('passed the expression...'); modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); return transformedInput; } else { console.log('did not pass the expression...'); transformedInput = transformedInput.substr(0, transformedInput.length-1); modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); return transformedInput; } }); } }; });