YouTip

# AngularJS Filters * * * Filters can be added to expressions and directives using a pipe character (|). * * * ## AngularJS Filters AngularJS filters can be used to transform data: | Filter | Description | | --- | --- | | currency | Formats a number as a currency format. | | filter | Selects a subset of items from an array. | | lowercase | Formats a string to lowercase. | | orderBy | Orders an array by an expression. | | uppercase | Formats a string to uppercase. | * * * ## Adding Filters to Expressions Filters can be added to expressions using a pipe character (|) and a filter name. (In the following two examples, we will use the `person` controller mentioned in previous chapters) The **uppercase** filter formats a string to uppercase: ## AngularJS Example [Try it yourself »](#) The **lowercase** filter formats a string to lowercase: ## AngularJS Example [Try it yourself »](#) * * * ## The currency Filter The **currency** filter formats a number as a currency format: ## AngularJS Example [Try it yourself »](#) * * * ## Adding Filters to Directives Filters can be added to directives using a pipe character (|) and a filter name. The **orderBy** filter orders an array by an expression: ## AngularJS Example [Try it yourself »](#) * * * ## Filtering Input Input filters can be added to directives using a pipe character (|) and a filter name, followed by a colon and a model name. The **filter** filter selects a subset of an array: ## AngularJS Example [Try it yourself »](#) * * * ## Custom Filter The following example creates a custom filter called **reverse**, which reverses a string: ## AngularJS Example var app = angular.module('myApp', []); app.controller('myCtrl', function($scope){ $scope.msg = ""; }); app.filter('reverse', function(){//Dependencies can be injected return function(text){return text.split("").reverse().join(""); }}); [Try it yourself »](#)