Dec
26
2015
By abernal
They are a mechanism to process data, for example parse currency values in order to perform the proper format and localization if possible.
Sample
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="product row" ng-hide="store.product.soldOut">
<h3 >
{{store.product.name}}
<em class="pull-right">{{store.product.price | currency}}</em>
</h3>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
</body>
</html>
date
{{ '1388123412323' | date:'MM/dd/yyyy @ h:mma' }} // Output : 12/27/2015 @ 12:50AM
uppercase
{{ 'octagon gem' | uppercase }} // Output : OCTAGON GEM
limitTo
With strings
{{ 'octagonal' | limitTo:8 }} // Output : octagona
With arrays
<li ng-repeat="product in store.products | limitTo:3"> // Will display only the first 3 products
orderBy
This will list the products by descending price (expensiers to cheapest) <li ng-repeat="product in store.products | orderBy:'-price'"> This will list the products by ascending price (cheapest to expensier) <li ng-repeat="product in store.products | orderBy:'price'">