/ng-currency

Currency with AngularJS made easy!

Primary LanguageJavaScriptMIT LicenseMIT

ng-currency

NPM Version NPM Downloads CI Build Coveralls

semantic-release

ng-currency has officially entered maintenance mode.

Install

You can install this package either with npm or with bower.

npm

$ npm install ng-currency

Then add a <script> to your index.html:

<script src="/node_modules/ng-currency/dist/ng-currency.js"></script>

Or require('ng-currency') from your code.

bower

$ bower install salte-io/ng-currency

Then add a <script> to your index.html:

<script src="/bower_components/ng-currency/dist/ng-currency.js"></script>

Example

See it in action!

ES6 Usage

app.module.js

import angular from 'angular';
import ngCurrency from 'ng-currency';

angular.module('my-app', [
  ngCurrency // 'ng-currency'
]);

inside your angular app

<input type="text" model="yourModel" ng-currency />

ES5 Usage

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="/node_modules/angular/dist/angular.min.js"></script>
    <script src="/node_modules/ng-currency/dist/ng-currency.min.js"></script>
    <script>
      var app = angular.module('my-app', [
        'ng-currency'
      ]);

      app.controller('MainCtrl', function($scope) {
        $scope.value = 123456.78;
      });
    </script>
  </head>
  <body ng-app="my-app" ng-controller="MainCtrl">
    <input type="text" ng-model="value" ng-currency>
  </body>
</html>

Bindings

min / max

Default: undefined

Description: Specifies the range the ng-model value can be within for validation and hard-cap

<input type="text" model="yourModel" ng-currency min="1" max="1337" />
  • If you want to be able to dynamically enable/disable validations from a controller you can use the following
<input type="text" model="yourModel" ng-currency min="1" max="1337" ng-required="true" />

currency-symbol

Default: Locale Currency Symbol

Description: Prefixes the formatted currency value with the currency symbol.

<input type="text" model="yourModel" ng-currency currency-symbol="¥" />

Active (ng-currency)

Default: true

Description: Dynamically disable / enable ng-currency.

<input type="text" model="yourModel" ng-currency={{isCurrency}} currency-symbol="¥" />

fraction

Default: 2

Description: Determines the number of decimal places.

<input type="text" ng-currency min="0" fraction="0" />

hard-cap

Default: false

Description: Forces the ng-model value to stay within the min / max range.

<input type="text" ng-currency min="0" hard-cap="true" />