-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfilters.html
102 lines (82 loc) · 2.67 KB
/
filters.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Umbracular</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div ng-app="ufest" ng-controller="newsCtrl" class="container">
<div class="jumbotron">
<h1>Filters</h1>
<h4>Filtering, ordering and formatting client-side</h4>
<input type="text" ng-model="keywords" placeholder="Filter in content-field here..." class="form-control">
<h4>Ordering</h4>
<select ng-model="field" ng-init="field='created'" ng-change="reverse=false" class="form-control">
<option value="created">Created date</option>
<option value="name">Name</option>
</select>
<button ng-click="reverse=!reverse" class="btn" ng-class="{'btn-info':reverse}">Flip</button>
</div>
<ul class="list-unstyled">
<li ng-repeat="item in items | filter:{content:keywords} | orderBy:field:reverse">
<h3>{{item.name}}</h3>
<small>{{item.created | date:'dd.MM.yyyy'}}</small>
<div ng-bind-html="item.content"></div>
</li>
<li ng-if="!items"><p>Wait for server to respond (it goes to sleep, so first request may be really slow...</p></li>
</ul>
</div>
<script type="text/javascript" src="//code.angularjs.org/1.2.24/angular.js"></script>
<script type="text/javascript" src="//code.angularjs.org/1.2.24/angular-sanitize.js"></script>
<script type="text/javascript" src="//code.angularjs.org/1.2.24/angular-animate.js"></script>
<script type="text/javascript">
var app = angular.module('ufest',['ngSanitize','ngAnimate']);
// Include ngSanitize (and source) in order to parse "unsafe" html in the view
app.controller('newsCtrl', ['$scope','$http','$timeout',function($scope,$http, $timeout) {
var getNews = $http({
url:'http://apitalk.azurewebsites.net/umbraco/api/newsapi/Search/',
method:'GET',
params:$scope.query
});
/* If the getNews promise returns successfull (http status 200 ok) */
getNews.success(function(res) {
$scope.items = res.data;
});
/* Otherwise */
getNews.error(function(res) {
if (res.meta && res.meta.error) {
console.log(res.meta.error);
} else {
console.log('other unknown error, connection error etc...');
}
});
}]);
</script>
<style>
/* Transition only applies when animating */
li.ng-enter, li.ng-leave {
transition:all 0.5s;
overflow: hidden;
}
/* Coming in */
li.ng-enter {
opacity:0;
max-height:0;
}
li.ng-enter.ng-enter-active {
opacity:1;
max-height:200px;
}
/* Going out */
li.ng-leave {
opacity:1;
max-height:200px;
}
li.ng-leave.ng-leave-active {
opacity:0;
max-height:0;
}
</style>
</body>
</html>