angularjs - nbende.files.wordpress.com · basic usage with expressions to make filters interact...

http://nbende.wordpress.com

AngularJS

Nagaraju Bende


Blog


Twitter

@nbende

FaceBook

nbende


Agenda

• Filters in AngularJS


Basic usage with expressionsTo make filters interact with the expression, we just need to put

them inside double curly brackets:

{{expression | filter}}

Also, the filters can be combined, thus creating a chain where the output of

filter1 is the input of filter2, which is similar to the pipeline that exists in

Linux/Unix-based operating systems:

{{expression | filter1 | filter2}}


Filters

Filters in view templates:

Two type of filters:Filter format

Filter array

{{ expression [| filter_name[:parameter_value] ... ] }}


Angular Filters

number

currency

date

lowercase

Uppercase

json


currencyThe currency filter is used to format a number based on a currency. The basic

usage of this filter is without any parameter:

{{ 10 | currency}}

The result of the evaluation will be the number $10.00, formatted and prefixed

withthe dollar sign.

We can also apply a specific locale symbol, shown as follows:

{{ 10 | currency:' ₹'}}


dateThe date filter is one of the most useful filters of the framework.

Normally, a date value comes from the database or any other

source in a raw and generic format.

Basically, we can use this filter by declaring it inside any expression.

In the following example, we have used the filter on a date

variable attached to the scope: {{ user.birthdate | date }}The output will be Dec 10, 1990. However, there are numerous combinations we can make with the

optional format mask:

{{user.birthdate | date:'MMMM dd/MM/yyyy HH:mm:ss' }}When you use this format, the output changes to December 10/12/1990 21:42:10.


Optional. The date format to display the date in, which can be one or more of the following:"yyyy" year (2016)"yy" year (16)"y" year (2016)"MMMM" month (January)"MMM" month (Jan)"MM" month (01)"M" month (1)"dd" day (06) "d" day (6) "EEEE" day (Tuesday)"EEE" day (Tue) "HH" hour, 00-23 (09) "H" hour 0-23 (9)"hh" hour in AM/PM, 00-12 (09) "h" hour in AM/PM, 0-12 (9)"mm" minute (05) "m" minute (5)"ss" second (05) …………………


The format value can also be one of the following predefined formats:"short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM)"medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05 AM)"shortDate" same as "M/d/yy" (1/5/16)"mediumDate" same as "MMM d, y" (Jan 5, 2016)"longDate" same as "MMMM d, y" (January 5, 2016)"fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016)"shortTime" same as "h:mm a" (9:05 AM)"mediumTime" same as "h:mm:ss a" (9:05:05 AM)


filtervery usefull clientside filtering with no effors

This filter attribute performs exactly what is needed for rich filtering, acting over

an array and applying any filtering criteria.

<tbody ng-repeat="j in Jobs | filter:search">

<td>{{j.job_desc | uppercase }} </td>

<td>{{j.min_lvl | currency : 'INR' }} </td>

<td>{{j.min_lvl | currency : 'INR' }} </td>


limitToSometimes, we need to display text, or even a list of elements, and it might be

necessary to limit its size. This filter does exactly that and can be applied to a

string or an array.

example where there is a limit to the expression:{{ expression | limitTo:10 }}

lowercaseThe lowercase filter displays the content of the expression in lowercase:{{ expression | lowercase }}

uppercaseThe uppercase filter displays the content of the expression in uppercase:{{ expression | uppercase}}


orderByWith the orderBy filter, we can order any array based on a predicate expression.

This expression is used to determine the order of the elements and works in three

different ways:

• String: This is the property name. Also, there is an option to prefix

+ or – to indicate the order direction. At the end of the day, +plate or

-plate are predicate expressions that will sort the array in an ascending

or descending order.

• Array: Based on the same concept of String's predicate expression, more than

one property can be added inside the array. Therefore, if two elements are

considered equivalent by the first predicate, the next one can be used, and

so on.

• Function: This function receives each element of the array as a parameter

and returns a


Filter Array in ng-repeat

<input type="text" ng-model="search" /><ul><li ng-repeat="n in names |

orderBy:'name' | filter : search | limitTo : 3 ">

{{n.name}}

</li></ul>


Filters


Using Filters in Controllers & Services

Add a dependency with the name <filterName>Filter to your controller or service.

angular.module('myModule', []).controller('FilterCntrl',['filterFilter', function(filterFilter) {

this.array = [{name:'Tobias'},{name:'Jeff'},{name:'Brad'}];

this.filteredArray = filterFilter(this.array, 'a');

}]);


Using $filters

$filter('filter name') return filter.

angular.module('myModule', []).controller('FilterCntrl',function($filter) {

this.array = [{name:'Tobias'},{name:'Jeff'},{name:'Brad'}];

var filterFilter = $filter('filter');this.filteredArray = filterFilter(this.array, 'a');

});


Custom Filter

angular.module("demo", []).filter('reverse', function () {

return function(input, uppercase) {var out = "";for (var i = 0; i < input.length; i++) {

out = input.charAt(i) + out;}// conditional based on optional argumentif (uppercase) {

out = out.toUpperCase();}return out;

};});

Reverse: {{ greeting | reverse }}<br>Reverse + uppercase: {{ greeting | reverse : true }}<br>


Thank you!

@nbende

nbende.wordpress.com

www.linkedin.com/nbende

angularjs - nbende.files.wordpress.com · basic usage with expressions to make filters interact...

Documents