홍길동 / 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
<!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">
<div>
Amount as a number: {{ctrl.amount | number}}
</div>
<div>
Total cost as a currency: {{ctrl.totalCost | currency}}
</div>
<div>
Total cost in GBP: {{ctrl.totalCost | currency:'GBP '}}
</div>
<div>
Shout: {{ctrl.name | uppercase}}
</div>
<div>
Whisper: {{ctrl.name | lowercase}}
</div>
<div>
Start time: {{ctrl.startTime | date:'medium'}}
</div>
<div>
as JSON: {{ctrl.struct | json}}
</div>
</div>
<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
};
}]);
</script>
</body>
</html>
<!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:'&#163'}}
</li>
<li>
Amount - Number: {{ctrl.amount | number }}
</li>
<li>
Amount - Number (4 decimals): {{ctrl.amount | number:4}}
</li>
<li>
Amount - Yummy &#x3c0 = {{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>
<!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>
<!DOCTYPE html>
<html>
<head>
<title>Custom Filters in Action</title>
<script src="../../tp/angular.js"></script>
</head>
<body ng-app="filtersApp">
<div ng-controller="FilterCtrl as ctrl">
<div>
Start time (Timestamp): {{ctrl.startTime}}
</div>
<div>
Start time (Time): {{ctrl.startTime | date:'h:m a'}}
</div>
<div>
Start time (Our filter): {{ctrl.startTime | timeAgo}}
</div>
<div>
Start time (Our filter 2): {{ctrl.startTime | timeAgo:true}}
</div>
<div>
Some time ago (Computed): {{ctrl.someTimeAgo | date:'h:m a'}}
</div>
<div>
Some time ago (Our filter): {{ctrl.someTimeAgo | timeAgo}}
</div>
</div>
<script type="text/javascript">
angular.module('filtersApp', [])
.controller('FilterCtrl', [function () {
var self = this;
self.startTime = new Date().getTime();
self.someTimeAgo = self.startTime - (1000*3600*4);
}])
.filter('timeAgo', [function () {
var _m = 1000 * 60,
_h = _m * 60,
_d = _h * 24,
_mon = _d * 30;
return function (ts, ignoreSecs) {
var now = new Date().getTime(),
diff = now - ts;
if (diff < _m && !ignoreSecs) {
return 'seconds ago';
} else if (diff < _h) {
return 'minutes ago';
} else if (diff < _d) {
return 'hours ago';
} else if (diff < _mon) {
return 'days ago';
} else {
return 'months ago';
}
}
}]);
</script>
</body>
</html>