Git Product home page Git Product logo

angular-money-directive's Introduction

angular-money-directive

Build Status

Quick Demo

This directive validates monetary inputs in "42.53" format (some additional work is needed for "32,00" European formats). Note that this is not designed to work with currency symbols. It largely behaves like Angular's implementation of type="number".

It does a few things:

  • Prevents entering non-numeric characters
  • Prevents entering the minus sign when min >= 0
  • Supports min and max like in <input type="number">
  • Rounds the model value by precision, e.g. 42.219 will be rounded to 42.22 by default
  • On blur, the input field is auto-formatted. Say if you enter 42, it will be formatted to 42.00

Version 1.2.x supports Angular 1.3 and up. Version 1.1.x will continue to work for Angular 1.2.

Usage:

npm install angular-money-directive

or

bower install angular-money-directive

Load the unminified or minified file from dist dir:

<script src="dist/angular-money-directive.js"></script>

Then include it as a dependency in your app.

angular.module('myApp', ['fiestah.money'])

Attributes:

  • money: required
  • ng-model: required
  • type: Set to text or just leave it out. Do not set to number.
  • min: optional Defaults to 0.
  • max: optional Not enforced by default
  • precision: optional Defaults to 2. Set to -1 to disable rounding. Rounding is also disabled if parseInt(precision, 10) does not return 0 or higher.

Basic example:

<input type="text" ng-model="model.price" money>

min, max and precision can be set dynamically:

<input type="text" ng-model="model.price" money min="{{min}}" max="{{max}}" precision="{{precision}}">

Tests:

  1. Install test deps: npm install
  2. Run: ./node_modules/karma/bin/karma start

angular-money-directive's People

Contributors

ryanbertrand avatar thatmarvin avatar webfxmasta avatar wli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

angular-money-directive's Issues

How to disallow plus sign within the text box ?

Hi,
I'm able enter + sign within the text box, How can i avoid this ?
Example : +444.22

First i will enter a number like 444.22 and then i can add + symbol at the beginning of the text box.

Formatting issue on initial rendering

I have this:

<input type='text' precision='2' max='99999999999.99' min='0.01' ng-model='salary' />

The value in the model is 0.01. It is being displayed as 0 until you visit the field and tab out. This is due to ngModelCtrl.$render() not being called in the precision observe callback,

onBlur has no impact on the entered string

[ x ] prevents alphanumeric characters
[ x ] prevents negatives when min=>1
[ ] autoformats string to ##.## onBlur

I am probably missing something obvious, but maybe this is a 'doc bug'.
Anything I can check before reading the code?

Always dirty

Thank you for your solution!

There is very big issue I think. If I put your directive to my input, angular form become dirty from the start.
Are you plan to fix this in nearest time, because I want to use your directive in my project?

Thank you.

Model Update in Background to 0 causes input field to display a blank string

If the model is updated in the background (i.e. not by typing in the input field) to be zero (0), the input field then displays a blank string, instead of a properly formatted numeric number 0 (when 0 is supposed to be a valid value). If I type in a zero (0), then the input field displays the correctly formatted string.

Directive does not support localization

When using different number formats (i.e. currency symbol) defined by angular locale the directive needs to reflect that visually and also allow those characters to be entered in the money field. Currently the directive is en-US and $ only (or other locales that overlap).

Adding to bower

Do you have plans to add it to bower ? The name angular-money-directive is free there.

Options are not dynamic

Hi and thank you.

I have a situation where I need to dynamically set min, max and precision, but right now the directive preserves the initial values it finds.

Thank you.

Bug(?) when entering invalid char into a field with rounded value

  • Enter some number which will be rounded:

    12.3456

  • Press tab or click outside to leave the field. The value will be rounded:

    12.35

  • Focus on the field and press any invalid char, a letter for example l. The previous, not rounded value is shown:

    12.3456.

I would expect the value 12.35 will not change.

Allow all negative numbers

Is there a way to allow any and all negative numbers? I could set min="-9999999" but I'd rather be able to not set a minimum at all...

Strict DI Error

Directive definitions do not follow the minification guildelines:

.directive('money', function($parse) { ... })

Should be

.directive('money', ['$parse', function($parse) { ... }])

Can you please fix?

Update to Angular 1.3.x

Hi and thank you.

Can you please update the code to the design of Angular 1.3.x?

Use $validators for validation for instance.

Thank you.

Comma separating number above thousand

when i enter number above thousand (100000.00) it is not adding the comma (,) to separate the numbers. i would like to have 100,000.00 rather than 100000.00

Input field blank unless i press '0' and i keep getting NaN on the model

Hi,

The demo looks great, however the directive does not work and I have 0 errors. If I type any number, the input field stays blank and if i type 0 it actually populates it. Typing 0 doesn't actually update it on the model or scope however typing anything else returns NaN. Im on angular 1.2.*(latest)

Any ideas?

Cheers

Non-numerics are still valid.

Love the directive, works great except whenever I press a non-numeric character twice in the field it is inputted into the field. Just a little bug, the ng-model is still the correct format however.
screen shot 2015-10-19 at 7 48 13 pm

screen shot 2015-10-19 at 7 45 33 pm

Input type="number"

Hi I am using your directive and i love it.

Is there any way to make it work with input type="number"?

It is particularly for mobile so that when the input field is in focus, it brings up the number key pad rather than text keyboard.

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.