Ketnote: AngularJS Filters

Angular JS

The Filters become handy first of all for the output formatting. Here are some regular angular filers:

• lowercase/upercase {{ uppercase_expression | uppercase}}
  
  

  {{'london' | upercase}}   > LONDON



• currency (Adds currency symbol)
  {{ currency_expression | currency : symbol : fractionSize}}
  
  

  {{amount | currency:"USD$"}}  > USD$350



• number (Formats a number as text)
  {{ number_expression | number : fractionSize}}
  
  

  {{ 97.523 | number:2}}  > 97.52



• date (Formats date by template)
  {{ date_expression | date : format : timezone}}
  
  

  {{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}} 
   > 10/29/2010 at 6:40AM

  {{note.created | date:"'Created on a' EEEE 'in' MMMM"}} 
   > Created on a Friday in October
  



• json (Converts a JavaScript object into JSON string)
  {{ json_expression | json : spacing}}
  
  

  {{ {'name':'value'} | json }}  > {"name": "value"}

## Filter usage The general syntax template is following: {{ expression [| filter_name[:parameter_value] ... ] }} Which allows you to pass arguments and chain the filters. * **Simple filter** {{ expression | filter_name }} * **Filter with arguments** {{ expression | filter_name: arg1, arg2 }} * **Chained filters** {{ expression | filter_name1 | filer_name2}} * **Chained filters with arguments** {{ expression | filter_name1: arg1, arg2 | filer_name2: arg2}} Using filter from java script: $filter('filter_name')(input, arg1, arg2) ---- ## The filter Filter Selects the subset of items from array and returns as a new array. {{["A", "B", "AC", "C"] | filer:"a"}} > ["A", "AC"] If we have array of objects, than we can to filter them by some property value. {{[{type:"Science"}, {type:"Fiction"}, {type:"Science"}] | filter:{type:'Science'}}} ## Using wildcard Here we are showing the products filtered based on our search input & among the active category. Notice ` <input ng-model="search.$"/>` uses wildcard `$` which means that filter searches for input value among the all properties of the product. <input ng-model="search.$"/> ... <a class="product-card" ng-repeat="product in products| filter:activeCategory filter:search" ng-href="#/products/{{product.id}}">></a> ---- ## see Also * [Keynote: AngularJS Services](http://bloomlab.blogspot.com.ee/2015/10/keynote-angularjs-services.html) * [Keynote: AngularJS Routing](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-routing.html) * [Keynote: AngularJS Do the custom things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-custom-things.html) * [Keynote: AngularJS Do the regular things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-regular-things.html) * [Keynote: AngularJS Basics](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-basic-short-notes.html) * [Angular Recipe: Passing data into your Directive](http://bloomlab.blogspot.com.ee/2015/10/angular-recipe-passing-data-into-your.html) * [AngularJS - API Filter](https://docs.angularjs.org/api/ng/filter) * [AngularJS - Developer Documentation](https://docs.angularjs.org/guide) * [Tutorials Point - AngularJS](http://www.tutorialspoint.com/angularjs/angularjs_directives.htm)