Pazar , 28 Mayıs 2017
Anasayfa » JavaScript » AngularJS » AngularJS Sıralama Filitresi

AngularJS Sıralama Filitresi

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;

angularjs-sort

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. )

 

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.

 

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.

ANGULARJS ÖRNEK UYGULAMA AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

Hakkında Hayri

İlginizi Çekebilir

AngularJS Route Yapma

Bu yazıda Angularjs route yapma (Angularjs routing) kavramını inceleyeceğiz.  Bu yazı ve bundan sonraki bir …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir