Bu yazıda AngularJS ile sıralama işlemlerini inceleyeceğiz.
AngularJS ile veri sıralama kavramı konusunda yeni olanlar öncelikle AngularJS Filitre Kullanımı | AngularJS Filters makalesi okumalarını tavsiye ederim.
Angualarda Sıralama Yapmak İçin;
1. orderBy filter kullanılır
{{ sıralanacak_ifade | orderBy : ifade : ters}}
Örnek: ng-repeat=”personel in personeller | orderBy:’maas’:false”
2. Artan şekilde sıralama yapmak için ters ifadesini false yapın
3. Azalan şekilde sıralama yapmak içinse ters ifadesini true yapın
4. Ayrıca artan yada azalan sıralama için + yada – işaretini kullanabilirsiniz.
Örnek : ng-repeat=”personel in personeller | orderBy:’+maas'”
Hadi bunlar bir örnekle uygulayalım;
Select menü sıralama yapılacak sutunları ve sıralama yapılacak yönü göstermektedir. Select seçilen ifadeyi değiştirip tablonun sıralama şeklini değiştirecektir.
SCRIPT: Controller fonksiyonu ile model oluşturulacaktır. Ayrıca $scope anahtarına sutunSirala özelliği nesne olarak eklenecektir. sutunSirala özelliği angular yüklendiğinde sütunları otomatik alarak isme göre sıralayacaktır. Sayfa yüklendiğinde isme göre sıralama yapıldığına dikkat edin.( Bir önceki makalede anlattığım modeli kullandım. )
|
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 |
var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": "Erkek","maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": "Erkek","maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": "Erkek","maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": "Kız","maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": "Erkek","maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": "Kız","maas": "4054" }, { "isim": "Bala","soyisim": "Merkan","cinsiyet": "Erkek","maas": "2703" }, { "isim": "Nil","soyisim": "Aksaç","cinsiyet": "Erkek","maas": "3510" }, { "isim": "Ulualp","soyisim": "Seziş","cinsiyet": "Erkek","maas": "2688" }, { "isim": "Çağlar","soyisim": "Selçuk atay","cinsiyet": "Erkek","maas": "3524" }, { "isim": "Berkem","soyisim": "Erdoğan","cinsiyet": "Kız","maas": "2290" }, { "isim": "Özgünel","soyisim": "Demirtaş","cinsiyet": "Erkek","maas": "3193" }, { "isim": "Mübelliğ","soyisim": "Ölçer","cinsiyet": "Kız","maas": "3603" }, { "isim": "Tuyuğ","soyisim": "Aral kaplan","cinsiyet": "Erkek","maas": "2270" }, { "isim": "Zafir","soyisim": "Dingiz","cinsiyet": "Erkek","maas": "1880" }, { "isim": "Gülnar","soyisim": "Dinç","cinsiyet": "Kız","maas": "1897" }, { "isim": "Badegül","soyisim": "Tekelioğlu","cinsiyet": "Erkek","maas": "3587" }, { "isim": "Binalp","soyisim": "İsen","cinsiyet": "Kız","maas": "4334" }, { "isim": "Ganiye","soyisim": "Ekmekyapar","cinsiyet": "Erkek","maas": "2696" }, { "isim": "Baykutay","soyisim": "Karadeniz","cinsiyet": "Erkek","maas": "3882" }, { "isim": "Safiye","soyisim": "Muzoğlu","cinsiyet": "Kız","maas": "4015" }, { "isim": "Atınç","soyisim": "Eroğlu","cinsiyet": "Kız","maas": "3757" }, { "isim": "Sanaç","soyisim": "Yakıcı","cinsiyet": "Erkek","maas": "4088" } ]; $scope.personeller = personeller; $scope.sutunSirala="isim"; }); |
HTML: Select kutusu tablodaki listeyi seçili olduğu değere göre sıralayacak ve ekrana yazdıracaktır.(two way databinding- iki yönlü veri bağlama özelliği 🙂 ) Select nesnesindeki bazı özelliklerde + / – sembolleri kullanılmıştır. + artan sırada, – ise azalan sırada sıralama yapmamıza imkan vermektedir. Select nesnesindeki değer değiştiği gibi otomatik olarak tabloda option içindeki value değerine göre kendisini güncelleyecektir. Otomatik sıralama yapmak için orderBy filitresini listeyi gösterdiğimizi ifade içine | sembolü ile ekliyoruz.Tablo içindeki orderBy:sutunSirala filtresi Select nesnesindeki ng-modeli almaktadır. Bu kadar açıklama ile kafanızı karıştırdıysam, şimdi kodlar ile bu dağınıklığı toparlayalım. Kodları inceledikten sonra açıklamaya tekrar bir göz atarsınız.
|
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 |
<body ng-app="persModul"> <div ng-controller="persController"> <div> SIRALA: <select ng-model="sutunSirala"> <option value="isim">İsme Göre Sıralama</option> <option value="+cinsiyet">Cinsiyete Göre Sıralama</option> <option value="+maas">Maasa Göre Artan Sıralama</option> <option value="-maas">Maasa GÖre Azalan Sıralama</option> </select> </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>MAAŞ</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller|orderBy:sutunSirala"> <td> {{ personel.isim | uppercase }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.maas |currency : '₺' :2 }} </td> <td> {{ personel.maas |number :2 }} </td> </tr> </tbody> </table> </div> </body> |
HTML & KOD: AngularJS Sıralama( AngularJS sorting) işlemi için yazdığımız kodları toparlayacak olursak. HTML belgemiz aşağıdaki gibi oluşacaktır.
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": "Erkek","maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": "Erkek","maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": "Erkek","maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": "Kız","maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": "Erkek","maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": "Kız","maas": "4054" }, { "isim": "Bala","soyisim": "Merkan","cinsiyet": "Erkek","maas": "2703" }, { "isim": "Nil","soyisim": "Aksaç","cinsiyet": "Erkek","maas": "3510" }, { "isim": "Ulualp","soyisim": "Seziş","cinsiyet": "Erkek","maas": "2688" }, { "isim": "Çağlar","soyisim": "Selçuk atay","cinsiyet": "Erkek","maas": "3524" }, { "isim": "Berkem","soyisim": "Erdoğan","cinsiyet": "Kız","maas": "2290" }, { "isim": "Özgünel","soyisim": "Demirtaş","cinsiyet": "Erkek","maas": "3193" }, { "isim": "Mübelliğ","soyisim": "Ölçer","cinsiyet": "Kız","maas": "3603" }, { "isim": "Tuyuğ","soyisim": "Aral kaplan","cinsiyet": "Erkek","maas": "2270" }, { "isim": "Zafir","soyisim": "Dingiz","cinsiyet": "Erkek","maas": "1880" }, { "isim": "Gülnar","soyisim": "Dinç","cinsiyet": "Kız","maas": "1897" }, { "isim": "Badegül","soyisim": "Tekelioğlu","cinsiyet": "Erkek","maas": "3587" }, { "isim": "Binalp","soyisim": "İsen","cinsiyet": "Kız","maas": "4334" }, { "isim": "Ganiye","soyisim": "Ekmekyapar","cinsiyet": "Erkek","maas": "2696" }, { "isim": "Baykutay","soyisim": "Karadeniz","cinsiyet": "Erkek","maas": "3882" }, { "isim": "Safiye","soyisim": "Muzoğlu","cinsiyet": "Kız","maas": "4015" }, { "isim": "Atınç","soyisim": "Eroğlu","cinsiyet": "Kız","maas": "3757" }, { "isim": "Sanaç","soyisim": "Yakıcı","cinsiyet": "Erkek","maas": "4088" } ]; $scope.personeller = personeller; $scope.sutunSirala="isim"; }); </script> </head> <body ng-app="persModul"> <div ng-controller="persController"> <div> SIRALA: <select ng-model="sutunSirala"> <option value="isim">İsme Göre Sıralama</option> <option value="+cinsiyet">Cinsiyete Göre Sıralama</option> <option value="+maas">Maasa Göre Artan Sıralama</option> <option value="-maas">Maasa GÖre Azalan Sıralama</option> </select> </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>MAAŞ</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller|orderBy:sutunSirala"> <td> {{ personel.isim | uppercase }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.maas |currency : '₺' :2 }} </td> <td> {{ personel.maas |number :2 }} </td> </tr> </tbody> </table> </div> </body> </html> |
[…] ile tablo başlıklarına göre sıralama yapmadan önce AngularJS ile Sıralama isimli makaleyi okumanızı tavsiye […]
[…] Konu 9 :AngularJS Sıralama Filitresi […]