SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

exercise of basic computer programming.docx
exercise of basic computer programming.docxexercise of basic computer programming.docx
exercise of basic computer programming.docxmiftah88
 
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...Eric Eggert
 
Tgs ppt alpro no.3
Tgs ppt alpro no.3Tgs ppt alpro no.3
Tgs ppt alpro no.31300018047
 

La actualidad más candente (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
 

Destacado

AngulrJS Overview
AngulrJS OverviewAngulrJS Overview
AngulrJS OverviewEyal Vardi
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS ServicesEyal Vardi
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS AnimationsEyal Vardi
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS DirectivesEyal Vardi
 
AngularJS Routing
AngularJS RoutingAngularJS Routing
AngularJS RoutingEyal Vardi
 
Forms in AngularJS
Forms in AngularJSForms in AngularJS
Forms in AngularJSEyal Vardi
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile ProcessEyal Vardi
 

Destacado (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
 

Más de Eyal Vardi

Smart Contract
Smart ContractSmart Contract
Smart ContractEyal Vardi
 
Rachel's grandmother's recipes
Rachel's grandmother's recipesRachel's grandmother's recipes
Rachel's grandmother's recipesEyal Vardi
 
Performance Optimization In Angular 2
Performance Optimization In Angular 2Performance Optimization In Angular 2
Performance Optimization In Angular 2Eyal Vardi
 
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)Eyal Vardi
 
Angular 2 NgModule
Angular 2 NgModuleAngular 2 NgModule
Angular 2 NgModuleEyal Vardi
 
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.xEyal Vardi
 
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time CompilationAngular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time CompilationEyal Vardi
 
Routing And Navigation
Routing And NavigationRouting And Navigation
Routing And NavigationEyal Vardi
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 ArchitectureEyal Vardi
 
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.xEyal Vardi
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 ViewsEyal Vardi
 
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.0Eyal Vardi
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0Eyal Vardi
 
Http Communication in Angular 2.0
Http Communication in Angular 2.0Http Communication in Angular 2.0
Http Communication in Angular 2.0Eyal Vardi
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injectionEyal Vardi
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationEyal Vardi
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScriptEyal Vardi
 
Angular 2.0 Pipes
Angular 2.0 PipesAngular 2.0 Pipes
Angular 2.0 PipesEyal Vardi
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 formsEyal Vardi
 

Más de 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>