-
Notifications
You must be signed in to change notification settings - Fork 0
/
4.Lesson_ng-repeat_Filter_JSON-Array.html
197 lines (138 loc) · 5.73 KB
/
4.Lesson_ng-repeat_Filter_JSON-Array.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4.Lesson_ng-repeat_Filter_JSON-Array</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) {
$scope.default = " Hello AngularJS Filter!"
//names adında dizi tanımlandı
$scope.names = ["Elif", "Fırat", "Ali", "Veli", "Ayşe", "Mehmet"];
//Veriler adında dizi tanımlandı
$scope.veriler = [
{ "ad": "Elif", "soyad": "AVŞAR", "yas": 24 },
{ "ad": "Fırat", "soyad": "HAMARAT", "yas": 24 },
{ "ad": "Ali", "soyad": "SÖNMEZ", "yas": 15 },
{ "ad": "Veli", "soyad": "SÖNER", "yas": 25 },
{ "ad": "Ayşe", "soyad": "SÖNECEK", "yas": 12 },
{ "ad": "Mehmet", "soyad": "SÖNDÜ", "yas": 22 }
];
//haftaGunleri adında dizi tanımlandı
$scope.haftaGunleri = ["Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"];
});
</script>
</head>
<!--
♦ ng-repeat ="" : ng-modul'e ait bir directive'dir. Array içindeki nesnelere sıralı erişim sağlar.
Foreach döngüsü gibi düşünülebilinir. Nerede tekrarlanmasını istiyorsa ifade oraya yazılır.
SYNTAX:
<element ng-repeat="expression"></element>
Filter: SYNTAX:
{{ data | filter: options}}
• Karakter Büyütme(uppercase)
{{'AngularJS' | uppercase}}
• Karakter Küçültme(lowercase)
{{'AngularJS' | lowercase}}
• Belli sayıda karakter gösterme(limitTo)
{{'AngularJS' | limitTo:7}}
• Repeat Döngüsünü Sınırlama(limitTo)
item in items | limitTo: 3
• Para Birimi Filtresi(currency)
{{parabirimi_değeri | currency : sembol : kesir_boyutu}}
• Number
{{ deger | number : kesir_boyutu }}
NOT: angular.lowercase($scope.x1); şeklinde kullanımda vardır.
angular.isString($scope.x1) ile değerin bir string olduğunu,
angular.isNumber($scope.x1) ile değerin bir sayı olduğu anlaşılabilmektedir.
-->
<body ng-app="myapp" ng-controller="mycontrol">
<!-- Filter işlemini kullanabilmek için Input alanı oluşturuldu -->
İsim Arama :
<input type="text" ng-model="nameSearch" placeholder="Aranacak Kelime">
<br>
<ul>
<!-- ng-repeat döngü oluşturmak istenen yere yazılır -->
<li ng-repeat="name in names | filter : nameSearch">
{{name}}
</li>
</ul>
<!-- Arama yapıldığında filterın uzunluğu 0'a eşitse ng-show ile div ekranda gösterildi -->
<div ng-show="(names | filter : nameSearch).length == 0" style="color:red; font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:10px">Aradığınız sonuca ulaşılamadı!</div>
<hr>
<br>
<b>Filter Karakter İşlemleri</b>
<br> {{default | uppercase}} <!-- Karakter Büyütme -->
<br> {{default | lowercase}} <!-- Karakter Küçültme -->
<br> {{default | limitTo:16}} <!-- Belli sayıda karakter gösterme -->
<hr>
<br>
<table style="border: 1px solid grey ">
<tr>
<td width="100px" style="font-weight:bold">{veri}</td>
<td width="100px">{veri.ad}</td>
<td width="100px">{veri.soyad}</td>
<td width="100px">{veri.yas}</td>
</tr>
<!-- ng-repeat="" - Foreach döngüsü gibi düşünülebilinir. Nerede tekrarlanmasını istiyorsan oraya yazılır -->
<tr ng-repeat="veri in veriler">
<td width="350px">{{veri}}</td>
<td width="100px">{{veri.ad}}</td>
<td width="100px">{{veri.soyad}}</td>
<td width="100px">{{veri.yas}}</td>
</tr>
</table>
<hr>
<br>Hafta Günleri Arama :
<input type="text" ng-model="weekSearch">
<br>
<br>
<table style="border: 1px solid grey ">
<tr>
<td width="100px" style="font-weight:bold">GÜNLER</td>
<td width="100px">$index</td>
<td width="100px">$first</td>
<td width="100px">$middle</td>
<td width="100px">$last</td>
<td width="100px">$even</td>
<td width="100px">$odd</td>
</tr>
<tr ng-repeat="gunler in haftaGunleri | filter:weekSearch">
<td width="100px">{{gunler}}</td>
<td width="100px">{{$index}}</td>
<td width="100px">{{$first}}</td>
<td width="100px">{{$middle}}</td>
<td width="100px">{{$last}}</td>
<td width="100px">{{$even}}</td>
<td width="50px">{{$odd}}</td>
</tr>
</table>
<br> $index : elemanın index değerini verir.
<br> $first : 1. Elemanda true değerini alır.
<br> $middle : 1. Ve son eleman hariç true değerini alır.
<br> $last : son elemanda true değerini alır.
<br> $even : çift indexte true değerini alır.
<br> $odd : tek indexte true değerini alır.
<br>
<br>
<br>
<hr>
<!--...-->
LimitTo Kullanımı:<br>
<div ng-init=" garage = [
{brand: 'Kawasaki', country: 'Japan'},
{brand: 'Honda', country: 'Japan'},
{brand: 'Suzuki', country: 'Japan'},
{brand: 'Ducati', country: 'Italy'},
{brand: 'Harley Davidson' ,country: 'USA'},
{brand:'Bmw',country:'Germany'}]">
<ul>
<li ng-repeat="car in garage | limitTo:3">
{{ car.brand + ' ' + car.country }}
</li>
</ul>
</div>
</body>
</html>