Filters • AngularJS filters are used to format the model data for display

in the view

• Filters can be applied to an expression name followed by "|" symbol.

• Multiple filters can be applied to the same expression

• Built-in filters are 1. uppercase or lowercase – Change the case of a string

2. currency – Format a currency value

3. number – Format a general numeric value

4. json – Generate a JSON representation

5. date – Format the date

6. limitTo – Select/Display a limited no. of objects/information from a model(data).

7. orderBy – Sort the objects in an array

8. filter – Selects object in an array 1

Filters(continuous…) lowercase & uppercase

• Transforms text to lowercase or uppercase

<div>{{employee.name | uppercase}}</div>

<div>{{employee.designation | lowercase}}</div>

currency

• currency filter accepts the symbol for the currency and

the default is $.

<div>{{ 12345.67 | currency }}</div>

• We can use the (:) symbol to pass parameter to a filter as

follows.

<div>{{ "12345.67" | currency:"USD" }}</div>

2

Filters(continuous…) number

• This can be used to format number values - rounds a

decimal number, makes it a negative number, fix number

of decimal places to display.

<h5>Rounded number with no decimal places: {{number |

number:0}}</h5>

<h5>Number with 4 decimal places :{{number | number:4}}</h5>

json

• Converts javascript objects to json.

<div>{{ {'name':'value'} | json }}</div>

3

Filters(continuous…) • date: Formats date in various formats.s: {{number |

<h5>Format equivalent to 'M/d/yy h:mm a' for en_US locale{{

1288323623006 | date:'short'}}</h5>

<h5>Format equivalent to 'MM/dd/yyyy @ h:mma'{{

1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</h5>

• limitTo: limitTo filter can be used to limit the number of items to

be displayed in an array of items

<li ng-repeat="employee in employees | limitTo:5">

• orderBy: orderBy filter can be used to sort an array of items

<!-- To sort in ascending order -->

<tr ng-repeat="employee in employees | orderBy:'name'">

<!-- To sort in descending order -->

<tr ng-repeat="employee in employees | orderBy:'name':true"> 4

Filters(continuous…) filter • Enables search through an array of items

<input type="text" ng-model="searchText"/>

<li ng-repeat="employee in employees | filter:searchText">

custom filters • module.filter() return a function

• The returned function gets invoked each time Angular calls the

filter, which means two-way binding for our filters.

app.filter('', function () {

return function () {

return;

};

});

5

Form • AngularJS validate HTML form data using the two-way

data binding (ng-model)

• “novalidate” attribute to prevent the default HTML5 validations

• “ng-disabled” used to disable the Submit Button

• Angular provides properties on forms to validate them

• Angular Form Properties : Form properties also represent its states.

• The properties are

1. $pristine

2. $dirty

3. $valid

4. $invalid

6

Form(continuous…) Angular Form Properties

• formName.$pristine: TRUE if the user has not

interacted with the form yet

• formName.$dirty: TRUE if the user has already

interacted with the form.

• formName.$valid: TRUE if all containing form and

controls are valid

• formName.$invalid: TRUE if at least one containing

form and control is invalid.

• formName.$error: Is an object hash, containing

references to all invalid controls or form

7

Form(continuous…) • Each properties of form produces css classes related to

corresponding state

• list of css classes:

1. ng-pristine

2. ng-dirty

3. ng-valid

4. ng-invalid

• Each of the css class is appended by Angular to the form

or individual control according to its state

• For example, if your form has a state of invalid it will

also have a ng-invalid class

8

Form(continuous…) Flow of the form states

• Flow 1 : pristine and invalid

When the form is first rendered and the user has not interacted

with the form yet.

• Flow 2 : dirty and invalid

User has interacted with the form, but validity has not been

satisfied, yet.

• Flow 3 : dirty and valid

User has finished filling the form and all the validation rule

has been satisfied

9

Form(continuous…) <div id="container" ng-controller="AppCtrl">

<h1>Simple Registration Form</h1>

<form name="appForm" novalidate class="app-form">

<label>First name</label> :

<input type="text" name="firstName" ng-model="user.firstName" required>

<span ng-show="appForm.firstName.$dirty && appForm.firstName.$error.required">Required: Tell us your first name</span>

<br/>

<label>Email</label> :

<input type="email" name="email" ng-model="user.email" required> <span ng-show="appForm.email.$dirty && appForm.email.$error.required">Required: Tell us your email address</span>

<span ng-show="appForm.email.$dirty && appForm.email.$error.email">Invalid: This is not a valid email address</span>

<button ng-click=“submit()">Submit</button>

</form>

</div>

10

11

Thank you