Nagaraju Bende

Transcription

1 AngularJS Nagaraju Bende

2 Blog FaceBook nbende

3 Agenda Filters in AngularJS

4 Basic usage with expressions To 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}}

5 Filters Filters in view templates: {{ expression [ filter_name[:parameter_value]... ] }} Two type of filters: Filter format Filter array

6 Angular Filters number currency date lowercase Uppercase json

7 currency The 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:' '}}

8 date The 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, 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/ :42:10.

9 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, (09) "H" hour 0-23 (9) "hh" hour in AM/PM, (09) "h" hour in AM/PM, 0-12 (9) "mm" minute (05) "m" minute (5) "ss" second (05)

10 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, :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)

11 filter very 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. <td>{{j.job_desc uppercase }} </td> <td>{{j.min_lvl currency : 'INR' }} </td> <td>{{j.min_lvl currency : 'INR' }} </td> <tbody ng-repeat="j in Jobs filter:search">

12 limitto Sometimes, 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 }} lowercase The lowercase filter displays the content of the expression in lowercase: {{ expression lowercase }} uppercase The uppercase filter displays the content of the expression in uppercase: {{ expression uppercase}}

13 orderby With 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

14 Filter Array in ng-repeat <input type="text" ng-model="search" /> <ul> <li ng-repeat="n in names orderby:'name' filter : search limitto : 3 "> </li> </ul> {{n.name}}

15 Filters

16 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');

17 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');

18 Custom Filter Reverse: {{ greeting reverse }}<br> Reverse + uppercase: {{ greeting reverse : true }}<br> 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 argument if (uppercase) { out = out.touppercase(); } return out; };

19 Thank nbende.wordpress.com