AngularJS HTML tablo verileri,sütun sıralama kodu kullanımı örneği (AngularJS HTML table data,column sorting code usage example)

AngularJS ngRepeat direktifi ile HTML sayfanızda tablo verilerini, sütunları sıralı göstermek isterseniz aşağıdaki gibi “orderBy” özelliğini kullanabilirsiniz.

“orderBy” özelliğinin dışında “predicate” ve “reverse” özellikleride kullanılmıştır. İlgili özellikleri şöyledir,
“predicate”: Bu özellik ile sıralanacak objemizin hangi özelliğine göre sıralama gerçekletireceğimizi belirtiyoruz.
“reverse”: Bu özellik ile ise yapılan tablo sıralamasının tersten yapılıp yapılmayacağını belirtiyoruz. Örneğin “reverse” özelliğimiz “true” ise metin özellikleri için alfabetik, rakam sıralaması için ise 0’dan büyük sayılara göre sıralanacaktır.

$scope.categories = [
	{"name":"ABAP", "numberOfLetter":"4"},
	{"name":"SAP BW", "numberOfLetter":"6"},
	{"name":"SAP", "numberOfLetter":"3"},
	{"name":"SQL", "numberOfLetter":"3"},
	{"name":"Java", "numberOfLetter":"4"},
	{"name":"JavaScript", "numberOfLetter":"10"},
	{"name":"JQuery", "numberOfLetter":"6"},
	{"name":"AngularJS", "numberOfLetter":"9"},
	{"name":"HTML/CSS", "numberOfLetter":"8"},
	{"name":"Veritabanı(Database)", "numberOfLetter":"20"},
	{"name":"Grafik(Graph)", "numberOfLetter":"13"},
	{"name":"Linux", "numberOfLetter":"5"},
	{"name":"Ağ(Network)", "numberOfLetter":"11"}
]

$scope.categoryPredicate ='numberOfLetters';
$scope.reverse =false;
<table>
	<thead>
		<tr>
			<th>Category Name</th>
			<th>Number Letters of Category</th>
		</tr>
	</thead>

	<tbody>
		<tr ng-repeat="category in categories | orderBy:categoryPredicate:reverse">
			<td>{{category.name}}</td>
			<td>{{category.numberOfLetter}}</td>
		</tr>
	</tbody>
</table>

Yukarıdaki AngularJS kod bloğumuz ile tablo sıralamamızın sonucu ise şöyledir.

Sıralama işleminde eğer sıralanacak özelliklerin değerleri aynı ise yani aşağıdaki sonuç bloğumuzda görecek olduğunuz gibi SAP ve SQL kategorilerinin sıralama sayı değerleri aynı olduğu için isim özelliğine göre sıralamaya devam edilir. Yani SAP önce sonra SQL olarak sıralama devam eder.

Category Name Number Letters of Category
SAP 3
SQL 3
ABAP 4
Java 4
Linux 5
JQuery 6
SAP BW 6
HTML/CSS 8
AngularJS 9
JavaScript 10
Ağ(Network) 11
Grafik(Graph) 13
Veritabanı(Database) 20
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*