Angular JS Filter Order by Türkçe Karakter Sorunu – Çözümü (Angular JS Order by turkish character problem – solution)

Bu makalemizde Angular JS de kullanılan order by filtresindeki türkçe karakter sorununun çözümünü anlatacağım.

Öncelikle Angular JS de order by komutunun ne işe yaradığını ve nasıl kullanıldığını görelim bunun üzerinden sorunu ve çözümü anlatalım;  Order by sıralama yapmak için kullanılıyor asc (küçükten büyüğe) ve desc (büyükten küçüğe) olarak iki farklı şekilde kullanımı var .

Örneğin elimizde bir liste olduğunu ve bunu nasıl sıraladığını görelim;

Scope altındaki listemiz aşağıdaki gibi olsun

$scope.Liste = [{ Name: “Ali” }, { Name: “Nuray” }, { Name: “Çetin” }, { Name: “Selim” }, { Name: “Zeynep” }, { Name: “Fatma” }, { Name: “İsmail”  }];

Listeyi göstereceğimiz alanda sıralamak için order by filtresini kullanacağız;

<div ng-repeat=”eleman in Liste | orderBy:’Name'”>
{{eleman.Ad}}
</div>

Dediğimiz zaman A dan Z ye sıralayacaktır. ve  eğer orderBy :’-Name ‘ yazarsak Z ‘den A’ ya doğru sıralayacaktır.

Aslında yukarıdaki listeden istenilen sıra Şu ;

Ali – Çetin – Fatma – İsmail – Nuray – Zeynep olmasını beklerken Angular daki türkçe karakter sıkıntısı nedeniyle;

Ali- Fatma – İsmail – Nuray -Zeynep -Çetin olarak sıralanıyor ve sorun burada başlıyor.

Bu sorunu düzeltmek için Angular içindeki order by filtresi fonksiyonunda bir kaç değişiklik yapmamız gerekiyor.

Angular.js dosyasını açın ve Compare fonksiyonunu bulun;

function compare(v1, v2) {
var t1 = typeof v1;
var t2 = typeof v2;
if (t1 === t2 && t1 === “object”) {
v1 = objectToString(v1);
v2 = objectToString(v2);
}
if (t1 === t2) {
if (t1 === “string”) {
v1 = v1.toLowerCase();
v2 = v2.toLowerCase();
}
if (v1 === v2) return 0;
return v1 < v2 ? -1 : 1;
} else {
return t1 < t2 ? -1 : 1;
}
}

Fonksiyonumuz böyle kısa bir kaç değişiklik yapalım;

function compare(v1, v2) {
var t1 = typeof v1;
var t2 = typeof v2;
if (t1 === t2 && t1 === “object”) {
v1 = objectToString(v1);
v2 = objectToString(v2);
}
if (t1 === t2) {
if (t1 === “string”) {
v1 = v1.toLocaleLowerCase();
v2 = v2.toLocaleLowerCase();
}
if (v1 === v2) return 0;
return v1.localeCompare(v2);
} else {
return t1.localeCompare(t2);
}
}

Yaptığımız değişikliklerin ilki ;

toLowerCase() ifadelerini toLocaleLowerCase haline getirmek böylece türkçe karakterlerimizin lowercase yani küçükğ harfe dönüşürken bozulmamasını sağlıyoruz

Asıl önemli olan kısım ise karşılaştırma kısmı > ile karşılaştırma yaparken türkçe karakterler sıralamada Z harfinden sonra geliyor. Ama bunu V1.localeCompare(v2) yaparsak kendi alfabemize göre sıraladığı için bu sorun ortadan kalkacak Çetin ve diğer türkçe karakterle (Ö Ü Ş …)  başlayan isimlerin sıralamasını doğru şekilde yapacaktır.

 

Umarım Faydalı Bir yazı olmuştur.

Kusurumuz varsa affola eksiklerimiz var ise yorumlarda belirtebilirsiniz.