A collection of useful filters for AngularJS. Implemented filters: age, cep, cnpj, cpf, cpfCnpj, date, join, money, percentage, phone, replace and reverse.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
bower.json
package.json

README.md

Angular1-filters

npm version Bower version

NPM

A collection of useful filters for AngularJS.

Install

You can install the latest version of angular1-filters with npm or bower:

npm

$ npm install --save angular1-filters

bower

$ bower install --save angular1-filters

After running just put inside the modules of your application:

var app = angular.module('myApp', ['ngSanitize', 'angular1-filters']);

How to use

To apply a filter:

{{value | name_of_filter}}

Filters

The included filters are:

age

A filter that converts date to age.

Input:
{{ '1993-04-01' | age }}
{{ '01/04/1993' | age }}
{{ new Date('1993-04-01') | age }}

Output:
25
25
25

cep

A filter to return a number formatted as a cep.

Input:
{{ '47658245' | cep }}

Output:
47658-245

cnpj

A filter to return a number formatted as a cnpj.

Input:
{{ '71619383000129' | cnpj }}

Output:
71.619.383/0001-29

cpf

A filter to return a number formatted as a cpf.

Input:
{{ '08369635040' | cpf }}

Output:
083.696.350-40

cpfCnpj

A filter to return a number formatted as a cpf or cnpj.

Input:
{{ '08369635040' | cpfCnpj }}
{{ '71619383000129' | cpfCnpj }}

Output:
083.696.350-40
71.619.383/0001-29

date

A filter to formats a date to a specified format.

Parameters: date : [format (default '')]

format string can be composed of the following elements:

  • 'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
  • 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
  • 'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
  • 'MMMM': Month in year (January-December)
  • 'MMM': Month in year (Jan-Dec)
  • 'MM': Month in year, padded (01-12)
  • 'M': Month in year (1-12)
  • 'LLLL': Stand-alone month in year (January-December)
  • 'dd': Day in month, padded (01-31)
  • 'd': Day in month (1-31)
  • 'EEEE': Day in Week,(Sunday-Saturday)
  • 'EEE': Day in Week, (Sun-Sat)
  • 'HH': Hour in day, padded (00-23)
  • 'H': Hour in day (0-23)
  • 'hh': Hour in AM/PM, padded (01-12)
  • 'h': Hour in AM/PM, (1-12)
  • 'mm': Minute in hour, padded (00-59)
  • 'm': Minute in hour (0-59)
  • 'ss': Second in minute, padded (00-59)
  • 's': Second in minute (0-59)
  • 'sss': Millisecond in second, padded (000-999)
  • 'a': AM/PM marker
  • 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
  • 'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
  • 'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year
  • 'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD')
  • 'GGGG': The long form of the era string (e.g. 'Anno Domini')
  • 'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)
  • 'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)
  • 'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)
  • 'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)
  • 'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
  • 'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
  • 'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)
  • 'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)
Input:
{{ date_expression | date }}
{{ date_expression | date : 'yyyy-MM-dd' }}
{{ date_expression | date : 'dd/MM/yyyy' }}
{{ date_expression | date : 'dd/MM/yyyy h:mm' }}

Output:
Apr 01, 1993
1993-04-01
01/04/1993
01/04/1993 15:00

join

A filter to join an array into a string.

Parameters: join : [separator (default ',')]

Input:
{{ [1, 2, 3] | join }}
{{ [1, null, 2, undefined, 3] | join }}
{{ [1, 2, 3] | join:', ' }}

Output:
1,2,3
1,2,3
1, 2, 3

money

A filter to return a float formatted as a money.

Parameters: money : [symbol (default '')] : [precision (default 2)] : [decimals (default '.')] : [thousands (default ',')]

Input:
{{ 1000000 | money }}
{{ 1000000 | money : 'R$ ' : 2 : ',' : '.' }}
{{ 1000000 | money : '$ ' : 2 : '.' : ',' }}

Output:
1,000,000.00
R$ 1.000.000,00
$ 1,000,000.00

percentage

A filter to return a number formatted as a percentage.

Parameters: percentage : [decimals (default 2)]

Input:
{{ 100 | percentage }}
{{ 100 | percentage : 0 }}
{{ null | percentage }}
{{ undefined | percentage }}
{{ 0 | percentage : 0 }}
{{ 10.5 | percentage }}

Output:
100,00%
100%
0,00%
0,00%
0%
10,50%

phone

A filter to return a number formatted as a phone.

Input:
{{ '71999999999' | phone }}
{{ '7199999999' | phone }}

Output:
(71) 99999-9999
(71) 9999-9999

replace

A filter to replace string content.

Parameters: replace : [searchValue] : [newValue]

Input:
{{ 'abcdfff' | replace : 'f' : 'e' }}
{{ 'lucas' | replace : 'lucas' : 'ayres' }}

Output:
abcde
ayres

reverse

A filter to reverse order of arrays or strings.

Input:
{{ 'abcde' | reverse }}
{{ [1, 2, 3] | reverse }}

Output:
edcba
[3, 2, 1]

Contributing

  • Any contribution is appreciated.
  • If you are planning to add a new filter (or any other feature), please open an issue before.
  • Do you need a specific filter? Please open an issue that we will develop for you.

Submitting a Pull Request (PR)

  1. Clone the project:
$ git clone https://github.com/lucasayres/angular1-filters.git
  1. Make your changes in a new git branch:
$ git checkout -b my-branch master
  1. Add your changes.

  2. Push your branch to Github.

  3. Create a PR to master.