Filters,Forms &

Modules
Unit-3
 Filters
• Filters are used to modify the data. They can be clubbed in expression or
directives using pipe (|) character. The following list shows commonly used
filters.
 contd
• AngularJS provides Number filters to transform data:
• date Format a date to a specified format.
• limitTo:Limits an array/string, into a specified number of elements/characters.
• Number: Format a number to a string.
• E.g,<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
 Custom Filters
• make own filters by registering a new filter factory function with your module:
• Declare custom filter
• <ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
 Example
• Define filter
• <script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
• app.controller('namesCtrl', function($scope) {
$scope.names = ['Jani'', 'Birgit', 'Mary', 'Kai'];
});
• </script>
 Forms
• Input controls are the HTML input elements:
1. input elements
2. select elements
3. button elements
4. textarea elements
Example:<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
• Checkbox:<input type="checkbox" ng-model="myVar">
• Radiobuttons: depts:
<input type="radio" ng-model="myVar" value=“cse">CSE
<input type="radio" ng-model="myVar" value=“english">English
• Selectbox::Select a topic:
<select ng-model="myVar">
<option value="">
<option value=“java">JAVA
<option value=“C">C
</select>
 Form Validation

• AngularJS offers client-side form validation.

• AngularJS monitors the state of the form and input fields (input, textarea,
select), and notify the user about the current state.
• AngularJS also holds information about whether they have been touched, or
modified, or not.
Required
<form name="myForm">
<input name="myInput" ng-model="myInput" required> </form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

Email
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>
 Form State and Input State
Input fields have the following states:
•$untouched The field has not been touched yet
•$touched The field has been touched
•$pristine The field has not been modified yet
•$dirty The field has been modified
•$invalid The field content is not valid
•$valid The field content is valid

Forms have the following states:

•$pristine No fields have been modified yet
•$dirty One or more have been modified
•$invalid The form content is not valid
•$valid The form content is valid
•$submitted The form is submitted
 CSS Classes

The following classes are added to, or removed from, input fields:
•ng-untouched The field has not been touched yet
•ng-touched The field has been touched
•ng-pristine The field has not been modified yet
•ng-dirty The field has been modified
•ng-valid The field content is valid
•ng-invalid The field content is not valid
The following classes are added to, or removed from, forms:
•ng-pristine No fields has not been modified yet
•ng-dirty One or more fields has been modified
•ng-valid The form content is valid
•ng-invalid The form content is not valid
 Examples
• <style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}</style>
• <style>
input.ng-invalid {
background-color:pink;
}input.ng-valid {
background-color:lightgreen;
}</style>

Custom Validation :Create your own directive, containing a custom validation function, and refer to it by
using my-directive.
 Events
AngularJS supports the following events:
• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseup
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change
 Example
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>
 Triggering model update

• By default, change in content of the input element triggers the model update and validates the form.
• override this behavior by attaching ng-model-options directive with event name to the input
element.
The values of the ng-model-options can be following
•{updateOn : 'blur'} - updates the model when this element loose focus
•{updateOn : 'mouseup'} - updates the model when this element is clicked and
mouse button is released
•{updateOn : 'default'} - updates the model with default behavior, as and when
the key is pressed
•{updateOn : 'default mousedown'} - updates the model with default behavior, as
and when the key is pressed or mousedown event fires on the element
 Example
• Username: <input type="text" ng-model="PD.username" required
• ng-model-options="{updateOn : 'blur'}" />
• Address: <input type="text" ng-model="PD.address" required
• ng-model-options="{updateOn : 'default blur'}"/>