-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathex011-xxx.html
executable file
·126 lines (106 loc) · 3.89 KB
/
ex011-xxx.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html data-ng-app="workshopBeMEAN">
<title>{{ workshop }}</title>
<style>
.tags-item {
display: inline-block;
background-color: #000;
color: #fff;
margin: 0 4px;
}
</style>
<body>
<div data-ng-controller='BeerController'>
<!-- Exibição do array de cervejas setado no BeerController -->
{{ cervejas }}
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
<a href="" data-ng-click="predicate = 'name'; reverse=!reverse">Nome</a>
<!-- Listamos as cervejas do nosso escopo a diretiva ng-repeat -->
<ul>
<!-- instanciamos o valor de cada cerveja em beer -->
<li data-ng-repeat='beer in cervejas | orderBy: predicate:reverse'>
<!-- recuperamos os valores de name e price de cada cerveja -->
{{ beer.name }} - {{ beer.price }}
</li>
</ul>
</div>
<div data-ng-controller='RedtubeController'>
<button data-ng-click='rodar()'>Click aqui</button>
<input type="text" data-ng-model='query'>
<ul data-ng-show='mostraListagem'>
<li data-ng-repeat='v in videos'>
<h3>{{v.video.title}}</h3>
<a href={{v.video.url}}>
<img data-ng-src="{{ v.video.default_thumb }}" alt="{{v.video.title}}" title="{{v.video.title}}">
</a>
<div class='tags'>
<h4>Tags</h4>
<span class='tags-item' data-ng-repeat='tag in v.video.tags'>
{{ tag.tag_name }}
</span>
</div>
</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
angular.module('workshopBeMEAN', ['workshopFilters', 'workshopControllers'])
angular.module('workshopControllers', [])
.controller('RedtubeController', ['$scope', '$http',
function($scope, $http){
$scope.mostraListagem = false;
$scope.rodar = function(){
$scope.mostraListagem = !$scope.mostraListagem;
}
// var url = 'http://cep.correiocontrol.com.br/02011200.json';
$scope.query = 'Sasha%20Gray';
$scope.$watch('query', function(data) {
console.log('watch', data);
searchVideo(data);
});
var url = 'http://cors-server.getup.io/url/api.redtube.com/?data=redtube.Videos.searchVideos&search='+$scope.query;
function searchVideo(data){
url = 'http://cors-server.getup.io/url/api.redtube.com/?data=redtube.Videos.searchVideos&search='+data;
$http.get(url)
.success(function(data) {
console.log(data);
$scope.videos = data.videos;
})
.error(function(err){
console.log('Error: ', err)
});
};
}])
.controller('BeerController', ['$scope', '$http',
function($scope, $http){
var cerveja1 = {name: 'kaiser', price: 2};
var cerveja2 = {name: 'skol', price: 3};
var cerveja3 = {name: 'glacial', price: 4};
var cerveja4 = {name: 'polar', price: 6};
// ADICIONANDO AS CERVEJAS NO SCOPE DO CONTROLLER
$scope.cervejas = [cerveja1, cerveja2, cerveja3, cerveja4];
}]);
angular.module('workshopFilters', [])
.filter('reverseName', function () {
return function (text) {
if(text)
return text.split("").reverse().join("");
};
})
.filter('truncate', function () {
return function (text, length, end) {
if (isNaN(length))
length = 10;
if (end === undefined)
end = "...";
if (text.length <= length || text.length - end.length <= length) {
return text;
}
else {
return String(text).substring(0, length-end.length) + end;
}
};
});
</script>
</body>
</html>