SlideShare a Scribd company logo
Angular.js
Filters & Directives
2
Familiar Directives
ng-app (attaches Application Module to the page)
<html ng-app=”store”>
ng-show|hide (display a section based on an Expression)
ng-controller (attached Controller function to the page)
<body ng-controller=”StoreController as Store”>
<h1 ng-show=”name”> Hello, {{name}}! </h1>
ng-repeat (repeat a section for each block in an array)
<li ng-repeat=”product in store.products”> {{product.name}} </li>
3
A Bit of Working Code
<body ng-controller="StoreController as Store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em cass="pull-right">${{product.price}}</em>
</h3>
</li>
</ul>
</body>
There’s a better way to do this...
4
The {{currency}} filter
<body ng-controller="StoreController as Store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em cass="pull-right">${{product.price | currency}}</em>
</h3>
</li>
</ul>
</body>
Pipe the output through the filter.
{{currency}} adds the local currency sign
and the required decimal places.
5
Formatting examples
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}
{{'Icosahedron' | uppercase}}
{{'item Description' | limitTo:9}}
<li ng-repeat="product in store.products | orderBy:'-price'">
12/27/2013 @ 12:50AM
ICOSAHEDRON
Item Desc
‘-price’ lists by descending values: ‘price’ by ascending
6
Adding, nesting arrays
var gems = [
{ name: 'Icosahedron Gem',
price: 2.95,
description: 'twenty-sided regular solid',
images: [
{
full: 'icosahedron-01.jpg',
thumb: 'icosahedron-01-thumb.jpg'
},
{
full: "icosahedron-02.jpg",
. . .
{{product.images[0].full}} displays the first image
7
Using Angular array elements
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
<img src="{{product.images[0].full}}"/>
</h3>
</li>
</ul>
</body>
<img src="{{product.images[0].full}}"/> tries to load the image
BEFORE the expression evaluates.
USE <img ng-src="{{product.images[0].full}}"/> INSTEAD!
8
A bit of Working Code
<section>
<ul class="nav nav-pills”>
<li> <a href>Description</a> </li>
<li> <a href>Specifications</a> </li>
<li> <a href>Reviews</a> </li>
</ul>
</section>
9
A New Directive
<section>
<ul class="nav nav-pills”>
<li> <a href ng-click="tab = 1">Description</a> </li>
<li> <a href ng-click="tab = 2">Specifications</a> </li>
<li> <a href ng-click="tab = 3">Reviews</a> </li>
</ul>
{{tab}}
</section>
USE <img ng-src="{{product.images[0].full}}"/> INSTEAD!
{{tab}} prints the value to the screen
10
Two-Way Data Binding
● Expressions are RE-EVALUATED whenever a
property changes.
● When ng-click changes the value of tab, the
{{tab}} expression is updated automatically.
11
Tab Content panels
<section>
<ul class="nav nav-pills”>
<li> <a href ng-click="tab = 1">Description</a> </li>
<li> <a href ng-click="tab = 2">Specifications</a> </li>
<li> <a href ng-click="tab = 3">Reviews</a> </li>
</ul>
{{tab}}
</section>
<div class="panel">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel">
<h4>Specifications</h4>
<blockquote>No specs as yet</blockquote>
</div>
<div class="panel">
<h4>Reviews</h4>
<blockquote>No review as yet</blockquote>
</div> ● Now… how to trigger
the panels to show?
12
ng-click Directive
<div class="panel" ng-show="tab === 1>
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel" ng-show="tab === 2>
<h4>Specifications</h4>
<blockquote>No specs as yet</blockquote>
</div>
<div class="panel" ng-show="tab === 3>
<h4>Reviews</h4>
<blockquote>No review as yet</blockquote>
</div>
● Panel will show for
whichever tab is clicked!
13
Setting directive values
<section ng-init="tab = 1">
<ul class="nav nav-pills">
<li> <a href ng-click="tab = 1">Description</a> </li>
<li> <a href ng-click="tab = 2">Specifications</a> </li>
<li> <a href ng-click="tab = 3">Reviews</a> </li>
</ul>
. . .
● ng-init evaluates the expression
in its current scope
14
The ng-class ‘active:’ option
<section ng-init="tab = 1">
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1 }">
<a href ng-click="tab = 1">Description</a>
</li>
<li ng-class="{ active:tab === 2 }">
<a href ng-click="tab = 2">Specifications</a>
</li>
<li ng-class="{ active:tab === 3 }">
<a href ng-click="tab = 3">Reviews</a>
</li>
</ul>
. . . ● <ng-click> expression evaluates
"tab" class, sets to active if
TRUE

More Related Content

What's hot (10)

PPTX
Magento 2.0: Prepare yourself for a new way of module development
Ivan Chepurnyi
 
PPTX
Best practices for js testing
Karl Mendes
 
PPTX
Jsf lab
Yu-Ting Chen
 
PPTX
Bootstrap 4 ppt
EPAM Systems
 
PPTX
Editing the Visual Editor (WordPress)
Jake Goldman
 
PDF
Master AngularJS
Fabien Vauchelles
 
PDF
What I Talk About When I Talk About Composition
Mehdi Valikhani
 
PDF
A comprehensive guide on developing responsive and common react filter component
Katy Slemon
 
PDF
Css selectors
kundanbhat2
 
PDF
Steps to create image carousel by using angularjs
Manikandan Keerthivasan
 
Magento 2.0: Prepare yourself for a new way of module development
Ivan Chepurnyi
 
Best practices for js testing
Karl Mendes
 
Jsf lab
Yu-Ting Chen
 
Bootstrap 4 ppt
EPAM Systems
 
Editing the Visual Editor (WordPress)
Jake Goldman
 
Master AngularJS
Fabien Vauchelles
 
What I Talk About When I Talk About Composition
Mehdi Valikhani
 
A comprehensive guide on developing responsive and common react filter component
Katy Slemon
 
Css selectors
kundanbhat2
 
Steps to create image carousel by using angularjs
Manikandan Keerthivasan
 

Similar to Angular js filters and directives (20)

PPTX
Angular js PPT
Imtiyaz Ahmad Khan
 
PDF
Workshop 12: AngularJS Parte I
Visual Engineering
 
PPTX
Angular directive filter and routing
jagriti srivastava
 
PDF
Angularjs
Ynon Perek
 
DOCX
Angular js
prasaddammalapati
 
PDF
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Alessandro Nadalin
 
PDF
AngularJS Basics
Ravi Mone
 
PPTX
Angular js
Brian Atkins
 
PPTX
Angular
LearningTech
 
PPTX
Angular
LearningTech
 
PDF
Introduction to AngularJS
Jussi Pohjolainen
 
PDF
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Alessandro Nadalin
 
PPTX
Angular workshop - Full Development Guide
Nitin Giri
 
PDF
Angular.js Primer in Aalto University
SC5.io
 
PPTX
ANGULARJS introduction components services and directives
SanthoshB77
 
PPTX
Basics of AngularJS
Filip Janevski
 
PPTX
AngularJS
LearningTech
 
PPTX
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
PDF
243329387 angular-docs
Abhi166803
 
Angular js PPT
Imtiyaz Ahmad Khan
 
Workshop 12: AngularJS Parte I
Visual Engineering
 
Angular directive filter and routing
jagriti srivastava
 
Angularjs
Ynon Perek
 
Angular js
prasaddammalapati
 
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Alessandro Nadalin
 
AngularJS Basics
Ravi Mone
 
Angular js
Brian Atkins
 
Angular
LearningTech
 
Angular
LearningTech
 
Introduction to AngularJS
Jussi Pohjolainen
 
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Alessandro Nadalin
 
Angular workshop - Full Development Guide
Nitin Giri
 
Angular.js Primer in Aalto University
SC5.io
 
ANGULARJS introduction components services and directives
SanthoshB77
 
Basics of AngularJS
Filip Janevski
 
AngularJS
LearningTech
 
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
243329387 angular-docs
Abhi166803
 
Ad

More from Darryl Sherman (6)

PPT
Java Naming & Directory Services
Darryl Sherman
 
PDF
Il 01-search engines
Darryl Sherman
 
PDF
Il 02-search requeststrings
Darryl Sherman
 
ODP
Python unit testing
Darryl Sherman
 
ODP
PSD to HTML Conversion
Darryl Sherman
 
ODP
Node js lecture
Darryl Sherman
 
Java Naming & Directory Services
Darryl Sherman
 
Il 01-search engines
Darryl Sherman
 
Il 02-search requeststrings
Darryl Sherman
 
Python unit testing
Darryl Sherman
 
PSD to HTML Conversion
Darryl Sherman
 
Node js lecture
Darryl Sherman
 
Ad

Recently uploaded (20)

PPTX
Human Resources Information System (HRIS)
Amity University, Patna
 
PPTX
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
PDF
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
PDF
Revenue streams of the Wazirx clone script.pdf
aaronjeffray
 
PDF
IDM Crack with Internet Download Manager 6.42 Build 43 with Patch Latest 2025
bashirkhan333g
 
PPTX
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
PPTX
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
PPTX
Transforming Mining & Engineering Operations with Odoo ERP | Streamline Proje...
SatishKumar2651
 
PDF
Unlock Efficiency with Insurance Policy Administration Systems
Insurance Tech Services
 
PPTX
Agentic Automation Journey Series Day 2 – Prompt Engineering for UiPath Agents
klpathrudu
 
PDF
Wondershare PDFelement Pro Crack for MacOS New Version Latest 2025
bashirkhan333g
 
PDF
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
PDF
Build It, Buy It, or Already Got It? Make Smarter Martech Decisions
bbedford2
 
PDF
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
PDF
Alexander Marshalov - How to use AI Assistants with your Monitoring system Q2...
VictoriaMetrics
 
PPTX
AEM User Group: India Chapter Kickoff Meeting
jennaf3
 
PDF
SAP Firmaya İade ABAB Kodları - ABAB ile yazılmıl hazır kod örneği
Salih Küçük
 
PDF
[Solution] Why Choose the VeryPDF DRM Protector Custom-Built Solution for You...
Lingwen1998
 
PDF
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
PPTX
Empowering Asian Contributions: The Rise of Regional User Groups in Open Sour...
Shane Coughlan
 
Human Resources Information System (HRIS)
Amity University, Patna
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
Revenue streams of the Wazirx clone script.pdf
aaronjeffray
 
IDM Crack with Internet Download Manager 6.42 Build 43 with Patch Latest 2025
bashirkhan333g
 
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
Transforming Mining & Engineering Operations with Odoo ERP | Streamline Proje...
SatishKumar2651
 
Unlock Efficiency with Insurance Policy Administration Systems
Insurance Tech Services
 
Agentic Automation Journey Series Day 2 – Prompt Engineering for UiPath Agents
klpathrudu
 
Wondershare PDFelement Pro Crack for MacOS New Version Latest 2025
bashirkhan333g
 
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
Build It, Buy It, or Already Got It? Make Smarter Martech Decisions
bbedford2
 
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
Alexander Marshalov - How to use AI Assistants with your Monitoring system Q2...
VictoriaMetrics
 
AEM User Group: India Chapter Kickoff Meeting
jennaf3
 
SAP Firmaya İade ABAB Kodları - ABAB ile yazılmıl hazır kod örneği
Salih Küçük
 
[Solution] Why Choose the VeryPDF DRM Protector Custom-Built Solution for You...
Lingwen1998
 
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
Empowering Asian Contributions: The Rise of Regional User Groups in Open Sour...
Shane Coughlan
 

Angular js filters and directives

  • 2. 2 Familiar Directives ng-app (attaches Application Module to the page) <html ng-app=”store”> ng-show|hide (display a section based on an Expression) ng-controller (attached Controller function to the page) <body ng-controller=”StoreController as Store”> <h1 ng-show=”name”> Hello, {{name}}! </h1> ng-repeat (repeat a section for each block in an array) <li ng-repeat=”product in store.products”> {{product.name}} </li>
  • 3. 3 A Bit of Working Code <body ng-controller="StoreController as Store"> <ul class="list-group"> <li class="list-group-item" ng-repeat="product in store.products"> <h3> {{product.name}} <em cass="pull-right">${{product.price}}</em> </h3> </li> </ul> </body> There’s a better way to do this...
  • 4. 4 The {{currency}} filter <body ng-controller="StoreController as Store"> <ul class="list-group"> <li class="list-group-item" ng-repeat="product in store.products"> <h3> {{product.name}} <em cass="pull-right">${{product.price | currency}}</em> </h3> </li> </ul> </body> Pipe the output through the filter. {{currency}} adds the local currency sign and the required decimal places.
  • 5. 5 Formatting examples {{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}} {{'Icosahedron' | uppercase}} {{'item Description' | limitTo:9}} <li ng-repeat="product in store.products | orderBy:'-price'"> 12/27/2013 @ 12:50AM ICOSAHEDRON Item Desc ‘-price’ lists by descending values: ‘price’ by ascending
  • 6. 6 Adding, nesting arrays var gems = [ { name: 'Icosahedron Gem', price: 2.95, description: 'twenty-sided regular solid', images: [ { full: 'icosahedron-01.jpg', thumb: 'icosahedron-01-thumb.jpg' }, { full: "icosahedron-02.jpg", . . . {{product.images[0].full}} displays the first image
  • 7. 7 Using Angular array elements <body ng-controller="StoreController as store"> <ul class="list-group"> <li class="list-group-item" ng-repeat="product in store.products"> <h3> {{product.name}} <em class="pull-right">{{product.price | currency}}</em> <img src="{{product.images[0].full}}"/> </h3> </li> </ul> </body> <img src="{{product.images[0].full}}"/> tries to load the image BEFORE the expression evaluates. USE <img ng-src="{{product.images[0].full}}"/> INSTEAD!
  • 8. 8 A bit of Working Code <section> <ul class="nav nav-pills”> <li> <a href>Description</a> </li> <li> <a href>Specifications</a> </li> <li> <a href>Reviews</a> </li> </ul> </section>
  • 9. 9 A New Directive <section> <ul class="nav nav-pills”> <li> <a href ng-click="tab = 1">Description</a> </li> <li> <a href ng-click="tab = 2">Specifications</a> </li> <li> <a href ng-click="tab = 3">Reviews</a> </li> </ul> {{tab}} </section> USE <img ng-src="{{product.images[0].full}}"/> INSTEAD! {{tab}} prints the value to the screen
  • 10. 10 Two-Way Data Binding ● Expressions are RE-EVALUATED whenever a property changes. ● When ng-click changes the value of tab, the {{tab}} expression is updated automatically.
  • 11. 11 Tab Content panels <section> <ul class="nav nav-pills”> <li> <a href ng-click="tab = 1">Description</a> </li> <li> <a href ng-click="tab = 2">Specifications</a> </li> <li> <a href ng-click="tab = 3">Reviews</a> </li> </ul> {{tab}} </section> <div class="panel"> <h4>Description</h4> <p>{{product.description}}</p> </div> <div class="panel"> <h4>Specifications</h4> <blockquote>No specs as yet</blockquote> </div> <div class="panel"> <h4>Reviews</h4> <blockquote>No review as yet</blockquote> </div> ● Now… how to trigger the panels to show?
  • 12. 12 ng-click Directive <div class="panel" ng-show="tab === 1> <h4>Description</h4> <p>{{product.description}}</p> </div> <div class="panel" ng-show="tab === 2> <h4>Specifications</h4> <blockquote>No specs as yet</blockquote> </div> <div class="panel" ng-show="tab === 3> <h4>Reviews</h4> <blockquote>No review as yet</blockquote> </div> ● Panel will show for whichever tab is clicked!
  • 13. 13 Setting directive values <section ng-init="tab = 1"> <ul class="nav nav-pills"> <li> <a href ng-click="tab = 1">Description</a> </li> <li> <a href ng-click="tab = 2">Specifications</a> </li> <li> <a href ng-click="tab = 3">Reviews</a> </li> </ul> . . . ● ng-init evaluates the expression in its current scope
  • 14. 14 The ng-class ‘active:’ option <section ng-init="tab = 1"> <ul class="nav nav-pills"> <li ng-class="{ active:tab === 1 }"> <a href ng-click="tab = 1">Description</a> </li> <li ng-class="{ active:tab === 2 }"> <a href ng-click="tab = 2">Specifications</a> </li> <li ng-class="{ active:tab === 3 }"> <a href ng-click="tab = 3">Reviews</a> </li> </ul> . . . ● <ng-click> expression evaluates "tab" class, sets to active if TRUE