0% found this document useful (0 votes)
25 views40 pages

Unit 3

Uploaded by

Tirth Kachhiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views40 pages

Unit 3

Uploaded by

Tirth Kachhiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 40

Advanced Web Development

subject code:202046701
Unit-3

Prepared By:Prof.Khushali Patel


Assistant Professor (IT)
A D Patel Institute of Technology
Unit-3
AngularJS Filters

Filter name Description

currency Format a number to a currency format.


date Format a date to a specified format.
filter •Select a subset of items from an array.
json Format an object to a JSON string.
limitTo •Limits an array/string, into a specified number of
elements/characters.
lowercase Format a string to lower case.
number Format a number to a string.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.
Number filter Example
currency filter Example
currency <div ng-app="myApp" ng- Price: $58.00
controller="costCtrl">
The currency
<h1>Price: {{ price | currency }}</h1> filter formats a
</div>
number to a
currency format.
filter <div ng-app="myApp" ng-controller="namesCtrl"> • Jani
<ul> • Birgit
<li ng-repeat="x in names | filter : 'i'"> • Kai
{{ x }} This example displays only the
</li> names containing the letter "i".
</ul>
</div>
Filter an <div ng-app="myApp" ng-controller="namesCtrl">
Array Based <p><input type="text" ng-model="test"></p>
on User Input <ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
orderByMe- <table border="1" width="100%">
Sort an Array <tr>
Based on User <th ng-click="orderByMe('name')">Name</th>
Input <th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
Adding Filters to Expressions
Filter name Example o/p
uppercase <div ng-app="myApp" ng-
controller="personCtrl">
<p>The name is {{ lastName |
uppercase }}</p>
</div>

lowercase <div ng-app="myApp" ng-


controller="personCtrl">
<p>The name is {{ lastName |
lowercase }}</p>
</div>
Custom Filters
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
<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', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];});
</script>
The $timeout Service

• It is the same as setTimeout function in javascript


• To set a time delay on execution of a function $timout is
used.

var app = angular.module('myApp', []);


app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
AngularJS Modules
An AngularJS module defines an application.
The module is a container for the different parts of an application.
The module is a container for the application controllers.
Controllers always belong to a module.
Adding a Controller
Add a controller to your application, and refer to the controller with the ng-controller
directive:

Example
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

</script>
Adding a Directive

<div ng-app="myApp" w3-test-directive></div>

<script>
var app = angular.module("myApp", []);

app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
AngularJS in build Directives

Directive Description
ng-app Defines the root element of an
application.
ng-bind Binds the content of an HTML element
to application data.
ng-blur Specifies a behavior on blur events.
ng-change Specifies an expression to evaluate
when content is being changed by the
user.
ng-checked Specifies if an element is checked or
not.
ng-click Specifies an expression to evaluate
when an element is being clicked.

ng-controller Defines the controller object for an


application.

ng-cut Specifies a behavior on cut events.


ng-dblclick Specifies a behavior on double-click
events.

ng-disabled Specifies if an element is disabled or


not.

ng-focus Specifies a behavior on focus events.


ng-form Specifies an HTML form to inherit
controls from.

ng-hide Hides or shows HTML elements.


ng-href Specifies a url for the <a> element.
ng-if Removes the HTML element if a condition is false.
ng-include Includes HTML in an application.
ng-init Defines initial values for an application.
ng-keydown Specifies a behavior on keydown events.
ng-keypress Specifies a behavior on keypress events.
ng-keyup Specifies a behavior on keyup events.
ng-list Converts text into a list (array).
ng-maxlength Specifies the maximum number of characters
allowed in the input field.

ng-minlength Specifies the minimum number of characters


allowed in the input field.

ng-model Binds the value of HTML controls to application


data.

ng-mousedown Specifies a behavior on mousedown events.


ng-mouseenter Specifies a behavior on mouseenter events.
ng-mousemove Specifies a behavior on mousemove events.
ng-mouseover Specifies a behavior on mouseover events.
ng-mouseup Specifies a behavior on mouseup events.
ng-open Specifies the open attribute of an element.
ng-options Specifies <options> in a <select> list.
ng-paste Specifies a behavior on paste events.
ng-readonly Specifies the readonly attribute of an element.
ng-repeat Defines a template for each data in a collection.
ng-required Specifies the required attribute of an element.
ng-selected Specifies the selected attribute of an element.
ng-show Shows or hides HTML elements.
ng-srcset Specifies the srcset attribute for the <img> element.
ng-submit Specifies expressions to run on onsubmit events.
ng-switch Specifies a condition that will be used to show/hide
child elements.

You might also like