Page 1 :
4.., Filter, Forms and, Ajax Filters, objectives..., To understand built in filters of Angularis, To learn date, lowercase, uppercase, currency filters, To understand how to create custom filters and order by filters, To study angular forms, validations, To learn model binding, form controller, Using CSS classes, form events, custom model update, triggers, custom validation, To study Shttp service, To study Ajax implementation using Shttp, 4.1 INTRODUCTION, The AngularJS Filters are used to filter or format the data according to the user, requirements., Filters can be used within controllers, services and directives. They can used to, perform many types of transformations, but generally it is used to sort or format data, model., Several filters are provided by Angular like number, currency, date. Even we can, create custom filters in AngularJS., Filters can be used anywhere within the application, without being attached to any, specific data or controller. Filters manipulate the data as it moves from the scope to, the directive but the source data remains unchanged., A Form is a set of controls for the purpose of grouping related controls together that, means it is a collection of input controls. Controls like Input, Select, TextArea,, Checkbox, Radio buttons are the ways for a user to enter data., AngularjS gives us best solution for building full scale single page web applications., Angularjs provides us all the required features to create simple forms., In this chapter we will cover Angularjs filters, Forms, and Shttp Service., 4.1, Scanned by PDF Scanner
Page 3 :
7and using ng-repeat and by applying order by filter on name we are displaying all the, In above program in script tag we have created an array called student with namne and, xules, In exactly the same way, AngularJS has given us the angular.filter API to create, 5:om filter in AngularJS. A custom filter can be created using the following syntax., 4.9, Filter, Forms and Ajax Filters, Amol, Nagpur, Ramesh, Mumbai, Suail, Kolhapur, Suresh, Pune, De array, student items are arTanged by "name"., dents alphabetically. Note that if we write -name then all the names will be, S O descending order. Similarly we can apply filter on any field of an array., 27 Custom Filter, In AngularJS, iter. As we use app.controller() to create controllers and app.module() to create, we can create custom filters. AngularJS gives us a simple API to create a, atax:, spp. Filter ('filtername', function(), return function (input, optionalparam1,optionalparam2), var output;, 1/custom filter code goes here, return output;, gram 4.7: Program for custom filter, <IDOCTYPE html>, chtml>, chead>, script, ta https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">, /script>, /head>, cody>, Scanned by PDF Scanner
Page 4 : 'medium': It is equivalent to 'MMM d, y h:mm:ss a' (e.g. jan 5, 2020 12:08:10 PM), Filter, Forms and, AngularJS (BBA-CA: Sem. I), Ajec, 4,4, 'ss': Define Second in minute (e.g. output is 00-59), 's': Define Second in minute (e.g. output is 0-59), 'a': Define AM/PM marker (e.g. output is AM/PM), Following are some localized formats:, short': It is equivalent to 'M/d/yy h:mm a' (e.g. 4/5/20 11:10 PM), 'fullDate': It is equivalent to 'EEEE, MMMM d, y' (e.g. Monday, October 5,2019), longDate': It is equivalent to 'MMMM d, y' (e.g. September 3, 2010), 'mediumDate': It is equivalent to 'MMM d, y' (e.g. Sep 3, 2010), 'shortDate': It is equivalent to 'M/d/yy (e.g. 2/5/12), 'mediumTime': It is equivalent to 'h:mm:ss a' (e.g. 12:05:08 PM), 'shortTime': It is equivalent to 'h:mm a' (e.g. 12:05 PM), Program 4.2: Program for Date filter., <IDOCTYPE html>, <html>, <head>, <script, src="https://ajax.googleapis.com/ajax/1libs/angularjs/1.6.9/angular.nl., s"></script>, </head>, <body ng-app>, <div>, Default date: ({1288323623006 date}} <br />, Short date: {(1288323623006| date: 'short'}} <br />, Long date: ((1288323623006| date: 'longDate'}} <br />, Year: {{1288323623006 | date: 'yyyy'}} <br />, {{1288323623006 | date: 'MM/dd/yyyy @ h:mma'}}, </div>, </body>, </html>, Output:, Default date: Oct 29, 2010, Short date: 10/29/10 9:10 AM, Long date: October 29, 2010, Year: 2010, 10/29/2010 @ 9:10AM, Scanned by PDF Scanner
