web-dev-qa-db-fra.com

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 

<div ng-repeat="item in items">
    <span>
        {{item.cost | currency}}
    </span>
</div>

Je me demande comment appliquer le même filtre de devise dans les balises input. c'est à dire

<div ng-repeat="item in items">
    <input type="text"  ng-model="item.cost | currency" />
</div>

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 

javascriptjqueryangularjs
15
J. Davidson

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

<div ng-repeate="item in items">
    <input type="text"  ng-model="item.cost" format="currency" />
</div>

Et ajoutez cette directive à votre code.

// allow you to format a text input field.
// <input type="text" ng-model="test" format="number" />
// <input type="text" ng-model="test" format="currency" />
.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));
            });
        }
    };
}]);
37
jjbskir

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 analyseur et un formateur. Voici une question similaire .

Il existe une assez bonne directive ici qui le fait actuellement: ngmodel-format

3
Esteban Felix
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example52-production</title>


       <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>



      </head>
      <body ng-app="">
         <script>
    function Ctrl($scope) {
      $scope.amount = 1234.56;
    }
       </script>
      <div ng-controller="Ctrl">
      <input type="number" ng-model="amount"> <br>
      default currency symbol ($): <span id="currency-default">{{amount | currency}}</span>             <br>
      custom currency identifier (USD$): <span>{{amount | currency:"USD$"}}</span>
       </div>
       </body>
      </html>
1
sam rodrigues

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.

<input format-currency amount="amount">


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));
  });
  }
}
});

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

0
Jayant Patil

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 il s'agit de l'aide officielle pour le filtre de monnaie angulaire. 

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 vous sera utile.

0
Ragnar