Git Product home page Git Product logo

format-as-currency's Introduction

format-as-currency

Build Status Coverage Status npm cc0

Angular directive to format an input as a currency as the user types. Like autoNumeric for Angular.

Demo

http://bcherny.github.io/format-as-currency/demo

Installation

Install via bower or NPM:

  • Bower: bower install --save format-as-currency
  • NPM: npm install --save format-as-currency

Usage

<div ng-controller="myController">
  <input
    format-as-currency
    ng-model="value"
    type="text"
  >
</div>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/format-as-currency/format-as-currency.js"></script>
<script>
  angular
  .module('myModule', [
    'bcherny/formatAsCurrency'
  ])
  .controller('myController', function ($scope) {
    $scope.value = '' // currency input value
  })
</script>

With a custom currency symbol

<input
  format-as-currency
  currency-filter="'yuan'"
  ng-model="value"
  type="text"
>
<script>
  angular
  ...
  .filter('yuan', function ($filter) {
    return function (value) {
      return $filter('currency')(value, '¥')
    }
  })
</script>

With a custom currency formatter

<input
  format-as-currency
  currency-filter="'myFilter'"
  ng-model="value"
  type="text"
>
<script>
  angular
  ...
  .filter('myFilter', function () {
    return function (value) {
      return '¥' + value
    }
  })
</script>

With a module loader

Browserify

var formatAsCurrency = require('format-as-currency')
angular.module('myModule', [formatAsCurrency])

Rollup

import * as formatAsCurrency from 'format-as-currency'
angular.module('myModule', [formatAsCurrency])

Webpack

var formatAsCurrency = require('format-as-currency/src/format-as-currency')
angular.module('myModule', [formatAsCurrency])

Running the tests

npm test

Contributing

Contributions are welcome! Please be sure to:

  • File an issue for the problem that your PR addresses
  • Test your fix thoroughly
  • Follow the existing code style
  • Add unit tests to cover your feature, or to prevent future regressions

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.