angular-directive-percentage's Introduction

angular-directive-percentage

Credit

This directive is a port of fiestah's great work on angular-money-directive. Just slightly altered for percentages

Overview

This directive takes inputs in decimal format 0.425376 and displays it in a percentage format 42.5376 (%).

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. 0.42219 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

Usage:

$ bower install angular-directive-percentage

Then include it as a dependency in your app.

angular.module('myApp', ['angular-directive-percentage'])

Attributes:

percentage: 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 4. Set to -1 to disable rounding

Basic example:

<input type="text" ng-model="model.percent" percentage>

min, max and precision can be set dynamically in $scope:

<input type="text" ng-model="model.percent" percentage min="{{min}}">

Tests:

Install test deps: npm install and bower install
Run: npm test or ./node_modules/karma/bin/karma start.

Note: If running locally, you might get an error about can't submit to coveralls. This is only required if you want the code coverage badge for your forked repo. See below for setup.

Coveralls.io

Using coveralls.io for the code coverage badge. Using instanbul, karma-coverage, and karma-coveralls to generate code coverage and push to coveralls.io. The push to coveralls.io requires the repo token. I am using an environment variable

$ export COVERALLS_REPO_TOKEN_FOR_ANGULAR_DIRECTIVE_PERCENTAGE=[your coveralls repo token]

that gets mapped to the required COVERALLS_REPO_TOKEN per test run. The travis build sets this environment variable using encrypted variables. However, if running this locally, you will need to setup your forked repo in coveralls.io and set that environment variable to your repo token

angular-directive-percentage's People

Stargazers

Watchers

angular-directive-percentage's Issues

precision is ignored when first binding value

When first binding a value to an input, the precision seems to be ignored.

ex. model = 0.97345 first appears as 97.35. It respects the precision = -1 once the user begins to modify it.

When using other validators (ie "required"), model value is not updated on first change

See here for an example. Try the following failure modes:

When input is empty (should be invalid because of required attribute) type a single digit into the field. See that the model doesn't update (and if you unfocus the field, the input field is cleared).
Paste a multi-digit number (e.g. 99) into the field. Same thing happens.

@serhalp and I tried writing a failing test for this but we couldn't, seemingly because the tests are calling $setViewValue directly.

Any reason to return '' instead of null when no value is provided

We store the value in a database and would prefear to have null instead of '' when the field has no value defined.

Any trick to achieve this ?

Could you consider implement an option like this. or something else.

Why does it not work with input[type=number] ?

It would be nice if this could be made working.

This would have the advantage that localization of numbers could be made by the browser.
German numbers are using a dot to separate the decimals.

Recommend Projects

dkhunt27 / angular-directive-percentage Goto Github PK