GUI - Angular:: More sample code; this time, filters.
Change-Id: I03a98d3d6e54426a2a67d662e9bc887fa1ce7170
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html
new file mode 100644
index 0000000..a9ce3ca
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Filters in Action</title>
+ <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+ <div ng-controller="FilterCtrl as ctrl">
+
+ <table>
+ <tr>
+ <td>
+ <button ng-click="ctrl.currentFilter = 'string'">
+ Filter with string
+ </button>
+ </td>
+ <td>
+ Filter Text
+ <input type="text"
+ ng-model="ctrl.filterOptions['string']"/>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button ng-click="ctrl.currentFilter = 'object'">
+ Filter with object
+ </button>
+ </td>
+ <td>
+ Show Done or Not Done
+ <input type="checkbox"
+ ng-model="ctrl.filterOptions['object'].done"/>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button ng-click="ctrl.currentFilter = 'function'">
+ Filter with function
+ </button>
+ </td>
+ </tr>
+ </table>
+ <ul>
+ <li ng-repeat="note in ctrl.notes |
+ filter:ctrl.filterOptions[ctrl.currentFilter] |
+ orderBy:ctrl.sortOrder |
+ limitTo:5">
+ {{note.label}} - {{note.type}} - {{note.done}}
+ </li>
+ </ul>
+ </div>
+
+
+ <script type="text/javascript">
+ angular.module('filtersApp', [])
+ .controller('FilterCtrl', [function () {
+ var self = this;
+
+ self.notes = [
+ {label: 'FC Todo', type: 'chore', done: false},
+ {label: 'FT Todo', type: 'task', done: false},
+ {label: 'FF Todo', type: 'fun', done: true},
+ {label: 'SC Todo', type: 'chore', done: false},
+ {label: 'ST Todo', type: 'task', done: true},
+ {label: 'SF Todo', type: 'fun', done: true},
+ {label: 'TC Todo', type: 'chore', done: false},
+ {label: 'TT Todo', type: 'task', done: false},
+ {label: 'TF Todo', type: 'fun', done: false}
+ ];
+
+ self.sortOrder = ['+type', '-label'];
+
+ self.filterOptions = {
+ 'string': '',
+ 'object': {done: false, label: 'F'},
+ 'function': function (note) {
+ return note.type === 'task' && note.done === false;
+ }
+ };
+
+ self.currentFilter = 'string';
+ }]);
+ </script>
+</body>
+</html>