Post 5 - Filters in Angular

Good things in angular we have proper standard way to present our data into our page using filters. With filters , items in array will be displayed in constant way. For example, if we include the  any price decimal value inside our application. The filters has a way to control those.

For Example : 

<div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product">
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price | currency }}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

From the example , we can observe that the prices inside ng-repeat were filtered using currency option. This will standardize the decimal price to be displayed.  If the current price stated is 

$2 , it turns out will be 2 decimal place ( $2.00 ) .

There are many other filters that we can found inside angular JS documentation.

The global understand format filters are :

{{ data* |  filter:options* }}

Type of Filters : 

1. date

{{  '1388123412323' | date:'MM/dd/yyyy @ h:mma' }}  //12/27/2013@12:50AM

2. uppercase&lowercase

{{  'diamond gem' | uppercase }}  //DIAMOND GEM

3. limitTo

{{  'My Project' | limitTo:5 }}  //My Pr

4. orderBy

<div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product | orderBy:'price' ">  //ascending order or -price for descending
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price | currency }}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

References : 

https://docs.angularjs.org/api/ng/filter