-
Notifications
You must be signed in to change notification settings - Fork 0
/
5.Lesson_http-get_OrderBy.html
90 lines (56 loc) · 2.74 KB
/
5.Lesson_http-get_OrderBy.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
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5.Lesson_http-get_OrderBy</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script>
var ControllerExample = angular.module("myapp", []);
ControllerExample.controller("mycontrol", function ($scope, $http) {
//Tarih üzerinde işlemler yapmak için değerler tanımlandı
var date = new Date();
$scope.dateView = date.getTime();
//$http.get("url").then( successfulFunc, unsuccessfulFunc);
$http.get("https://jsonplaceholder.typicode.com/users").then(function (AlinanDeger) {
$scope.veriler = AlinanDeger.data;
//Data yazılmaz ise 200 function(d){b||(b=yd(a)); vb bilgilerle birlikte gelir sadece veriler gelsin isteniyorsa data yazılmalıdır.
});
});
</script>
</head>
<!--
♦ $http : XMLHttpRequest alt yapısını kullanan uzak sunucu ile haberleşmek için kullanılan bir servistir.
Veri gönderme yada veri okuma işlemleri $http ile gerçekleştirilir.
SYNTAX:
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
♦ orderBy: Bir alana göre çıkan sonuçlar arasında sıralama yapmaktadır. orderBy : '-id' ile ise tersten sıralama gerçekleştirilir.
SYNTAX:
{{ orderBy_expression | orderBy : expression : reverse : comparator}}
-->
<body ng-app="myapp" ng-controller="mycontrol">
<!-- Arama yapabilmek için Input alanı eklendi -->
Users Search:
<input type="search" ng-model="userSearch">
Name Search:
<input type="search" ng-model="nameSearch">
<ul>
<!-- Arama sonuçlarının sıralaması name alanına göre gerçekleştirildi | filter : {name:nameSearch} ifadesiyle sadece name alanına göre arama gerçekleştirildi -->
<li ng-repeat="veri in veriler | filter: userSearch | orderBy: 'name' | filter : {name:nameSearch}" style="padding:20px">
{{veri.id}}, {{veri.name}}, {{veri.email}}
</li>
</ul>
<hr>
<!-- Controller alanında tanımlanan dateView değerine göre farklı saat ve tarih filtreleri uygulanabilmektedir -->
<b>Tarih ve Saat Filter:</b>
<br> {{dateView}}
<br> {{dateView | date}}
<br> {{dateView | date: 'short'}}
<br> {{dateView | date: 'medium'}}
<br> {{dateView | date: 'longDate'}}
<br> {{dateView | date: 'shortDate'}}
<br> {{dateView | date: 'fullDate'}}
<br> {{dateView | date: 'shortTime'}}
</body>
</html>