AngularJS Filters

AngularJS filters can be used to transform data:

currency      -    Format a number to a currency format.
filter     -    Select a subset of items from an array.
lowercase     -  Format a string to lower case.
orderBy     -  Orders an array by an expression.
uppercase    -  Format a string to upper case.

Sample Code:

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="name = 'test'; quantity = 0; price = 0; filt = 'test'">
<p>The name in Uppercase is {{ name | uppercase }}</p>
<p>The name in Lowercase is {{ name | lowercase }}</p>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
</body>
</html>

Output:


Another Example:

Sample Code:

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names = ['Test1', 'Test2', 'Test3', 'Sample1', 'Sample2', 'Sample3']; test = 't'">
<p>Filtering input:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ (x | uppercase) }}
</li>
</ul>
</div>
</body>

</html>

Output:



Cheers!!!

No comments:

Post a Comment