GUI - Angular:: More sample code; this time, filters.
Change-Id: I03a98d3d6e54426a2a67d662e9bc887fa1ce7170
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html
new file mode 100644
index 0000000..46e9c4d
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html
@@ -0,0 +1,83 @@
+<!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>