홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
df03d8de 1 parent 02f446b6

GUI - Angular:: More sample code; this time, filters. 

Change-Id: I03a98d3d6e54426a2a67d662e9bc887fa1ce7170
Inline Side-by-side
Showing 4 changed files with 278 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <title>Filters in Action</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-app="filtersApp">
8 +
9 + <div ng-controller="FilterCtrl as ctrl">
10 + <div>
11 + Amount as a number: {{ctrl.amount | number}}
12 + </div>
13 + <div>
14 + Total cost as a currency: {{ctrl.totalCost | currency}}
15 + </div>
16 + <div>
17 + Total cost in GBP: {{ctrl.totalCost | currency:'GBP '}}
18 + </div>
19 + <div>
20 + Shout: {{ctrl.name | uppercase}}
21 + </div>
22 + <div>
23 + Whisper: {{ctrl.name | lowercase}}
24 + </div>
25 + <div>
26 + Start time: {{ctrl.startTime | date:'medium'}}
27 + </div>
28 + <div>
29 + as JSON: {{ctrl.struct | json}}
30 + </div>
31 + </div>
32 +
33 + <script type="text/javascript">
34 + angular.module('filtersApp', [])
35 + .controller('FilterCtrl', [function () {
36 + var self = this;
37 + self.amount = 1024;
38 + self.totalCost = 4906;
39 + self.name = 'Onos Rocks!';
40 + self.startTime = new Date().getTime();
41 + self.struct = {
42 + foo: 'bar',
43 + baz: 3.1415
44 + };
45 + }]);
46 + </script>
47 +</body>
48 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <title>Filters in Action</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-app="filtersApp">
8 +
9 + <ul ng-controller="FilterCtrl as ctrl">
10 + <li>
11 + Amount - {{ctrl.amount}}
12 + </li>
13 + <li>
14 + Amount - Default Currency: {{ctrl.amount | currency}}
15 + </li>
16 + <li>
17 + <!-- Using English pound sign -->
18 + Amount - GBP Currency: {{ctrl.amount | currency:'&#163'}}
19 + </li>
20 + <li>
21 + Amount - Number: {{ctrl.amount | number }}
22 + </li>
23 + <li>
24 + Amount - Number (4 decimals): {{ctrl.amount | number:4}}
25 + </li>
26 + <li>
27 + Amount - Yummy &#x3c0 = {{ctrl.pi | number:4 }}
28 + </li>
29 +
30 + <li>
31 + Name - no filters: {{ctrl.name}}
32 + </li>
33 + <li>
34 + Name - lowercase: {{ctrl.name | lowercase}}
35 + </li>
36 + <li>
37 + Name - uppercase: {{ctrl.name | uppercase}}
38 + </li>
39 + <li>
40 + Name - prefix: {{ctrl.name | limitTo:4}}
41 + </li>
42 +
43 + <li>
44 + JSON filter: {{ctrl.struct | json}}
45 + </li>
46 +
47 + <li>
48 + Timestamp: {{ctrl.startTime}}
49 + </li>
50 + <li>
51 + Default Date filter: {{ctrl.startTime | date}}
52 + </li>
53 + <li>
54 + Medium Date filter: {{ctrl.startTime | date:'medium'}}
55 + </li>
56 + <li>
57 + Long Date filter: {{ctrl.startTime | date:'longDate'}}
58 + </li>
59 + <li>
60 + Custom Date filter: {{ctrl.startTime | date:'M/dd, yyyy'}}
61 + </li>
62 + <li>
63 + Custom Time filter: {{ctrl.startTime | date:'h:m a'}}
64 + </li>
65 + </ul>
66 +
67 + <script type="text/javascript">
68 + angular.module('filtersApp', [])
69 + .controller('FilterCtrl', [function () {
70 + var self = this;
71 + self.amount = 1024;
72 + self.totalCost = 4906;
73 + self.name = 'Onos Rocks!';
74 + self.startTime = new Date().getTime();
75 + self.struct = {
76 + foo: 'bar',
77 + baz: 3.1415
78 + };
79 + self.pi = Math.PI;
80 + }]);
81 + </script>
82 +</body>
83 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <title>Filters in Action</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-app="filtersApp">
8 +
9 + <div ng-controller="FilterCtrl as ctrl">
10 +
11 + <table>
12 + <tr>
13 + <td>
14 + <button ng-click="ctrl.currentFilter = 'string'">
15 + Filter with string
16 + </button>
17 + </td>
18 + <td>
19 + Filter Text
20 + <input type="text"
21 + ng-model="ctrl.filterOptions['string']"/>
22 + </td>
23 + </tr>
24 + <tr>
25 + <td>
26 + <button ng-click="ctrl.currentFilter = 'object'">
27 + Filter with object
28 + </button>
29 + </td>
30 + <td>
31 + Show Done or Not Done
32 + <input type="checkbox"
33 + ng-model="ctrl.filterOptions['object'].done"/>
34 + </td>
35 + </tr>
36 + <tr>
37 + <td>
38 + <button ng-click="ctrl.currentFilter = 'function'">
39 + Filter with function
40 + </button>
41 + </td>
42 + </tr>
43 + </table>
44 + <ul>
45 + <li ng-repeat="note in ctrl.notes |
46 + filter:ctrl.filterOptions[ctrl.currentFilter] |
47 + orderBy:ctrl.sortOrder |
48 + limitTo:5">
49 + {{note.label}} - {{note.type}} - {{note.done}}
50 + </li>
51 + </ul>
52 + </div>
53 +
54 +
55 + <script type="text/javascript">
56 + angular.module('filtersApp', [])
57 + .controller('FilterCtrl', [function () {
58 + var self = this;
59 +
60 + self.notes = [
61 + {label: 'FC Todo', type: 'chore', done: false},
62 + {label: 'FT Todo', type: 'task', done: false},
63 + {label: 'FF Todo', type: 'fun', done: true},
64 + {label: 'SC Todo', type: 'chore', done: false},
65 + {label: 'ST Todo', type: 'task', done: true},
66 + {label: 'SF Todo', type: 'fun', done: true},
67 + {label: 'TC Todo', type: 'chore', done: false},
68 + {label: 'TT Todo', type: 'task', done: false},
69 + {label: 'TF Todo', type: 'fun', done: false}
70 + ];
71 +
72 + self.sortOrder = ['+type', '-label'];
73 +
74 + self.filterOptions = {
75 + 'string': '',
76 + 'object': {done: false, label: 'F'},
77 + 'function': function (note) {
78 + return note.type === 'task' && note.done === false;
79 + }
80 + };
81 +
82 + self.currentFilter = 'string';
83 + }]);
84 + </script>
85 +</body>
86 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <title>Custom Filters in Action</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-app="filtersApp">
8 +
9 + <div ng-controller="FilterCtrl as ctrl">
10 + <div>
11 + Start time (Timestamp): {{ctrl.startTime}}
12 + </div>
13 + <div>
14 + Start time (Time): {{ctrl.startTime | date:'h:m a'}}
15 + </div>
16 + <div>
17 + Start time (Our filter): {{ctrl.startTime | timeAgo}}
18 + </div>
19 + <div>
20 + Start time (Our filter 2): {{ctrl.startTime | timeAgo:true}}
21 + </div>
22 + <div>
23 + Some time ago (Computed): {{ctrl.someTimeAgo | date:'h:m a'}}
24 + </div>
25 + <div>
26 + Some time ago (Our filter): {{ctrl.someTimeAgo | timeAgo}}
27 + </div>
28 + </div>
29 +
30 + <script type="text/javascript">
31 + angular.module('filtersApp', [])
32 + .controller('FilterCtrl', [function () {
33 + var self = this;
34 + self.startTime = new Date().getTime();
35 + self.someTimeAgo = self.startTime - (1000*3600*4);
36 + }])
37 + .filter('timeAgo', [function () {
38 + var _m = 1000 * 60,
39 + _h = _m * 60,
40 + _d = _h * 24,
41 + _mon = _d * 30;
42 +
43 + return function (ts, ignoreSecs) {
44 + var now = new Date().getTime(),
45 + diff = now - ts;
46 + if (diff < _m && !ignoreSecs) {
47 + return 'seconds ago';
48 + } else if (diff < _h) {
49 + return 'minutes ago';
50 + } else if (diff < _d) {
51 + return 'hours ago';
52 + } else if (diff < _mon) {
53 + return 'days ago';
54 + } else {
55 + return 'months ago';
56 + }
57 + }
58 + }]);
59 + </script>
60 +</body>
61 +</html>