| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Filters in Action</title> |
| <script src="../../tp/angular.js"></script> |
| </head> |
| <body ng-app="filtersApp"> |
| |
| <ul ng-controller="FilterCtrl as ctrl"> |
| <li> |
| Amount - {{ctrl.amount}} |
| </li> |
| <li> |
| Amount - Default Currency: {{ctrl.amount | currency}} |
| </li> |
| <li> |
| <!-- Using English pound sign --> |
| Amount - GBP Currency: {{ctrl.amount | currency:'£'}} |
| </li> |
| <li> |
| Amount - Number: {{ctrl.amount | number }} |
| </li> |
| <li> |
| Amount - Number (4 decimals): {{ctrl.amount | number:4}} |
| </li> |
| <li> |
| Amount - Yummy π = {{ctrl.pi | number:4 }} |
| </li> |
| |
| <li> |
| Name - no filters: {{ctrl.name}} |
| </li> |
| <li> |
| Name - lowercase: {{ctrl.name | lowercase}} |
| </li> |
| <li> |
| Name - uppercase: {{ctrl.name | uppercase}} |
| </li> |
| <li> |
| Name - prefix: {{ctrl.name | limitTo:4}} |
| </li> |
| |
| <li> |
| JSON filter: {{ctrl.struct | json}} |
| </li> |
| |
| <li> |
| Timestamp: {{ctrl.startTime}} |
| </li> |
| <li> |
| Default Date filter: {{ctrl.startTime | date}} |
| </li> |
| <li> |
| Medium Date filter: {{ctrl.startTime | date:'medium'}} |
| </li> |
| <li> |
| Long Date filter: {{ctrl.startTime | date:'longDate'}} |
| </li> |
| <li> |
| Custom Date filter: {{ctrl.startTime | date:'M/dd, yyyy'}} |
| </li> |
| <li> |
| Custom Time filter: {{ctrl.startTime | date:'h:m a'}} |
| </li> |
| </ul> |
| |
| <script type="text/javascript"> |
| angular.module('filtersApp', []) |
| .controller('FilterCtrl', [function () { |
| var self = this; |
| self.amount = 1024; |
| self.totalCost = 4906; |
| self.name = 'Onos Rocks!'; |
| self.startTime = new Date().getTime(); |
| self.struct = { |
| foo: 'bar', |
| baz: 3.1415 |
| }; |
| self.pi = Math.PI; |
| }]); |
| </script> |
| </body> |
| </html> |