SlideShare a Scribd company logo
1 of 6
{{ expression [| filter_name[:parameter_value] ... ] }}
<input type="text" ng-model="inputFilter" />
<ul>
<li data-ng-repeat="n in names
| orderBy:'name' | filter : inputFilter ">
{{name}}
</li>
</ul>
Filters
angular.module("demo", [])
.filter('reverse', function () {
return function(input, uppercase) {
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
}
return out;
};
});
Reverse: {{ greeting | reverse }}<br>
Reverse + uppercase: {{ greeting | reverse : true }}<br>
Custom Filters

More Related Content

What's hot (8)

JavaScript Tips
JavaScript TipsJavaScript Tips
JavaScript Tips
 
Prueba de montecarlo
Prueba de montecarloPrueba de montecarlo
Prueba de montecarlo
 
08 1 함수란
08 1 함수란08 1 함수란
08 1 함수란
 
Programacion
ProgramacionProgramacion
Programacion
 
exercise of basic computer programming.docx
exercise of basic computer programming.docxexercise of basic computer programming.docx
exercise of basic computer programming.docx
 
Selection
SelectionSelection
Selection
 
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
 
Tgs ppt alpro no.3
Tgs ppt alpro no.3Tgs ppt alpro no.3
Tgs ppt alpro no.3
 

Viewers also liked (9)

AngulrJS Overview
AngulrJS OverviewAngulrJS Overview
AngulrJS Overview
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS Services
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS Directives
 
AngularJS Routing
AngularJS RoutingAngularJS Routing
AngularJS Routing
 
Forms in AngularJS
Forms in AngularJSForms in AngularJS
Forms in AngularJS
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile Process
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 

More from Eyal Vardi

More from Eyal Vardi (20)

Why magic
Why magicWhy magic
Why magic
 
Smart Contract
Smart ContractSmart Contract
Smart Contract
 
Rachel's grandmother's recipes
Rachel's grandmother's recipesRachel's grandmother's recipes
Rachel's grandmother's recipes
 
Performance Optimization In Angular 2
Performance Optimization In Angular 2Performance Optimization In Angular 2
Performance Optimization In Angular 2
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
 
Angular 2 NgModule
Angular 2 NgModuleAngular 2 NgModule
Angular 2 NgModule
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
 
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time CompilationAngular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
 
Routing And Navigation
Routing And NavigationRouting And Navigation
Routing And Navigation
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
 
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.xAngular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 Views
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0
 
Http Communication in Angular 2.0
Http Communication in Angular 2.0Http Communication in Angular 2.0
Http Communication in Angular 2.0
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injection
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScript
 
Angular 2.0 Pipes
Angular 2.0 PipesAngular 2.0 Pipes
Angular 2.0 Pipes
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 

AngularJS Filters

  • 1.
  • 2. {{ expression [| filter_name[:parameter_value] ... ] }} <input type="text" ng-model="inputFilter" /> <ul> <li data-ng-repeat="n in names | orderBy:'name' | filter : inputFilter "> {{name}} </li> </ul>
  • 3.
  • 5. angular.module("demo", []) .filter('reverse', function () { return function(input, uppercase) { var out = ""; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; }; }); Reverse: {{ greeting | reverse }}<br> Reverse + uppercase: {{ greeting | reverse : true }}<br>