angularjs_part2
DESCRIPTION
angularTRANSCRIPT
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