angular-filters.md

#Angular Filters: Ninja Edition

###Objectives

• Understand Angular filters
• Be able to use Angular default filters
• Create a custom filter

Before we start the lesson, perform a git pull to get the ninjas-starter code from WDI_DTLA_2

###What are Angular filters?

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter.

###What is piping?

Angular allows piping, as in Terminal. A pipe allows you to send the output of something and send it as an input to another.

Example

# In Ninja Starter code
cat index.html | say

###Let's Ninja up!

1. Add ng-app = "NinjasApp" at the tag

2. Create main.js & source it in HTML

3. Create the module Ninjas App in main.js

    (function(){
   
      // Angular module
      angular
        .module('NinjasApp', []);
    
    })();
   

4. Declare ng-controller="NinjasController" in tag

5. Create NinjasController.js file and source it in HTML

6. Create NinjasController

    (function(){
   
      angular
        .module('NinjasApp')
        .controller('NinjasController' , NinjasController);
   
   
    function NinjasController(){
      // Capture variable
      var self = this;
   
      self.weapons = [
        {
          item: "Kama",
          price: 29.99,
          power: 1800321321
        },
        {
          item: "Grappling Hook",
          price: 99.99,
          power: 14563213231
        },
        {
          item: "Throwing knife",
          price: 55.99,
          power: 10033213123213123
        },
        {
          item: "Tomahawk",
          price: 14.99,
          power: 18762322
        },
        {
          item: "Bokken",
          price: 19.99,
          power: 123332
        },
        {
          item: "Tactical arm bracer",
          price: 88.99,
          power: 1432323
        },
        {
          item: "Black Dragon Sai Set",
          price: 44.99,
          power: 200043
        },
        {
          item: "Dueling sword",
          price: 33.99,
          power: 1200321312
        },
        {
          item: "Defense fan",
          price: 22.99,
          power: 1399321212321321
        },
        {
          item: "Jackhammer",
          price: 33.33,
          power: 13213231
        }
      ];
   
    }
   
    })();
   

In your HTML, let's ng-repeat thru the code

<li ng-repeat="weapons in ninjas.weapons">
  <p>
    <b>{{weapons.item | uppercase}}</b>
    <br />
    
  </p>
  <p>Price: {{weapons.price | currency:"USD$"}}</p>
  <p>Power: {{weapons.power | number}}</p>
  <br />
</li>

Add the filter for the text:

  <h1 class="ui black header">Search Ninja Weapons</h1>
  
  <div class="ui fluid icon input">
	  <input type="text" ng-model="searchWeapons" placeholder="Search..." />
	  <i class="search icon"></i>
  </div>

Change the ng-repeat to:

<li ng-repeat="weapons in ninjas.weapons | filter: searchWeapons">

Create a file called ReverseFilter.js and source it

Let's add a customer filter:

(function(){

  angular
    .module('NinjasApp')
    .filter('reverse', reverse);

    function reverse(){
      return function(input, uppercase){
        input = input || '';
        var out = '';
        for(var i = 0; i < input.length; i++){
          out = input.charAt(i) + out;
        }

        if(uppercase){
          out = out.toUpperCase();
        }
        return out;
      };
    }

})();

Use it:

<b>{{weapons.item | reverse:true | json}}</b

##Know some common built-in filters

• filter -- Yep, there's one called filter. It means "subset of array" and all you need is the array and a predicate (the string, object, or function that you're limiting your result set with). This returns a new array.
• currency -- Working with money? Pop a $ (or local currency variant) and some appropriate decimals onto a number with this filter.
• number -- Formats a number as text (which means you get things like -, commas, and decimals).
• date -- Transforms dates into formatted strings.
• json -- Converts JavaScript objects into JSON string format.
• lowercase -- Converts string to lowercase.
• uppercase -- Converts string to UPPERCASE.
• limitTo -- Caps an array or string at the specified limit of elements. You can use positive and negative limits to dictate whether these skim off the top or bottom of the set.
• orderBy -- Similar to filter, but instead of using a predicate to exclude, uses it to order an array.
  
  
  

Angular Filters Resources:
AngularJS Filters Documentation
Building Custom Angular Filters
Everything about custom filters in Angular
W3Schools Angular Filters Info
Egghead.io Angular Filters Tutorial (video)]
Egghead.io ngRepeat and Filtering Data (video)