Angularjs ile ilgili yazdığım son sıralama yazısında dikkatimden kaçan ufak bir nokta olduğunu gelen bir yorum üzerine farkettim. Sıralama yaptığımda Türkçe özgü karakterleri sıralamanın sonuna ekliyordu. İnternette bir kaynakta dile özgü olarak sıralama yaptıran bir tane angular modülü gördüm. Kaynak dosyasını ve kodlarını aşağıda paylaşıyorum.
AngularJS Tablolo Başlıklarına Göre Sıralama yazına ek olarak kodlarımız aşağıdaki gibi oluşturuluyor. Angularjs kodlarında dikkat etmemiz gereken nokta OrderBy filitresi yerine myOrderBy adında başka bir filitre uyguladığımızdır.
JavaScript
|
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 |
var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ {isim:"Hayri",soyisim:"KARA",dogum:new Date(1988,7,10),maas:3000}, {isim:"Yaşar",soyisim:"DOĞAN",dogum:new Date(1988,3,30),maas:2500}, {isim:"İsmet",soyisim:"ULUÇ",dogum:new Date(1983,6,20),maas:2700}, {isim:"Ayşe",soyisim:"YURT",dogum:new Date(1968,6,15),maas:3500}, {isim:"Sunay",soyisim:"ÖZTÜRK",dogum:new Date(1998,6,10),maas:2850}, {isim:"Nazmiye",soyisim:"ÇARIKÇI",dogum:new Date(1995,4,10),maas:2000} ]; $scope.personeller = personeller; $scope.sutunSirala = "isim"; $scope.cevir = false; $scope.veriSirala = function (sutun) { $scope.cevir = ($scope.sutunSirala == sutun) ? !$scope.cevir : false; $scope.sutunSirala = sutun; } $scope.siralaClass = function (sutun) { if ($scope.sutunSirala == sutun) { return $scope.cevir ? 'azalan' : 'artan'; } return ''; } }); /*Türkçe Karakterlere Göre Sıralama*/ app.filter("myOrderBy", [function () { return function (array, sortPredicate, reverseOrder) { if (!Array.isArray(array)) return array; if (!sortPredicate) return array; var isString = function (value) { return (typeof value === "string"); }; var isNumber = function (value) { return (typeof value === "number"); }; var isBoolean = function (value) { return (typeof value === "boolean"); }; var arrayCopy = []; angular.forEach(array, function (item) { arrayCopy.push(item); }); arrayCopy.sort(function (a, b) { var valueA = a[sortPredicate]; var valueB = b[sortPredicate]; if (isString(valueA)) return !reverseOrder ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA); if (isNumber(valueA) || isBoolean(valueA)) return !reverseOrder ? valueA - valueB : valueB - valueA; return 0; }); return arrayCopy; } }]); |
Sıralama kelimesı OrderBy yerine artık myOrderBy olarak değiştirdik. HTML kodlarını da aşağıdaki gibi değiştiriyoruz.
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 |
<body ng-app="persModul"> <div ng-controller="persController"> <table border="1" width="430"> <thead> <tr> <th ng-click="veriSirala('isim')"><div ng-class="siralaClass('isim')">İsim</div></th> <th ng-click="veriSirala('soyisim')"><div ng-class="siralaClass('soyisim')">Soyisim</div></th> <th ng-click="veriSirala('dogum')"><div ng-class="siralaClass('dogum')">Doğum Tarihi</div></th> <th ng-click="veriSirala('maas')"><div ng-class="siralaClass('maas')">Maaş</div></th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller | myOrderBy:sutunSirala:cevir"> <td> {{ personel.isim | uppercase }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.dogum | date:'dd-MM-yyyy'}} </td> <td> {{ personel.maas |number :2 }} </td> </tr> </tbody> </table> </div> </body> |
Angularjs Türkçe Karakterlere Göre Sıralama Dosya
JavaScript localeCopare metodu ile dile özgü sembollere göre sıralı filitreleme yapmak mümkün.
Filitreleme kodlarını aldığım web sitesi kaynağı:
http://www.janholinka.net/Blog/Article/8
[…] […]