angular-filter-ago
v1.0.1
Published
An Angular filter for friendly elapsed past time.
Downloads
8
Readme
angular-filter-ago
AngularJS filter that takes a date formatted YYYY-MM-DD HH24:MI:SS
and returns a formatted string to the nearest whole time increment from seconds to weeks. After seven weeks, dates are displayed with an abbreviated month and year.
BEFORE | AFTER
--------------------|------------
2015-10-20 13:40:02 | just now
2015-10-20 13:39:49 | 13s ago
2015-10-20 12:59:00 | 41m ago
2015-10-20 08:27:23 | 5h ago
2015-10-17 12:40:02 | 3d ago
2015-10-05 03:05:02 | 3w ago
2015-07-10 15:34:02 | Jul, 2015
2014-08-20 04:22:02 | Aug, 2014
Installation
- Include the library in your
index.html
file:
<script type="text/javascript" src="./ago.js"></script>
- Inject the module into your Angular app:
var app = angular.module('myApp', ['dds.ago']);
- Use the filter:
{{ date | ago }}
Example
Assuming a current date and time of 2015-10-20 13:40:02
and the following JSON object:
{"item_list": [
{"last_login":"2015-10-20 13:40:02", "user":"Merlin"},
{"last_login":"2015-10-20 13:39:49", "user":"Donna"},
{"last_login":"2015-10-20 12:59:00", "user":"Audrey"},
{"last_login":"2015-10-20 08:27:23", "user":"Grant"},
{"last_login":"2015-10-17 12:40:02", "user":"Samantha"},
{"last_login":"2015-10-05 03:05:02", "user":"Vincent"},
{"last_login":"2015-07-10 15:34:02", "user":"Pippy"},
{"last_login":"2014-08-20 04:22:02", "user":"Roderick"}
]}
Using the following HTML snippit:
<table>
<thead>
<td>last_login</td>
<td>user</td>
</thead>
<tbody>
<tr ng-repeat="item in item_list">
<td>{{ item.last_login }}</td>
<td>{{ item.last_login | ago }}</td>
<td>{{ item.user }}</td>
</tr>
</tbody>
</table>
Will output:
last_login | last_login | user
--------------------|------------|----------
2015-10-20 13:40:02 | just now | Merlin
2015-10-20 13:39:49 | 13s ago | Donna
2015-10-20 12:59:00 | 41m ago | Audrey
2015-10-20 08:27:23 | 5h ago | Grant
2015-10-17 12:40:02 | 3d ago | Samantha
2015-10-05 03:05:02 | 3w ago | Vincent
2015-07-10 15:34:02 | Jul, 2015 | Pippy
2014-08-20 04:22:02 | Aug, 2014 | Roderick