Pazar , 28 Mayıs 2017
Anasayfa » JavaScript » AngularJS » AngularJS Tablolo Başlıklarına Göre Sıralama

AngularJS Tablolo Başlıklarına Göre Sıralama

AngularJS ile tablo başlıklarına göre sıralama yapmadan önce AngularJS ile Sıralama isimli makaleyi okumanızı tavsiye ederim.

Makalenin başlığından anlaşılacağı gibi bir tablomuz olacak ve tablo başlılarına göre sıralama yaptıracağız.

Bu açıklamayı madde madde yazacak olursak;

  1. Tabloda hangi başlığa tıklarsak, o başlığa göre sıralama yapacak.
  2. İlk tıklamada veri artan sırada yapılacak ikinci tıklamada veri azalan sırada yapılacaktır.
  3. Tablo başlıklarında sıralamanın şeklini gösteren iconlar da mevcut sıralamaya göre (de artan yada azalan şekilde) değişecektir.

tablo sıralama

SCRIPT: Controller fonksiyonumuz aşağıdaki şekilde oluşturulacaktır.

  1. Model oluşturulacak
  2. sutunSirala isim değerini  ve cevir özelliği ise false değerini alacaktır. Form yüklendiğinde bu şartlara göre tablomuz sıralanmış olarak gösterilecektir.
  3. Kullanıcı tablo başlığına tıkladığında veriSirala() metodu çalışıp sutunSirala ve cevir özelliklerini değiştirecektir.
  4. siralaClass() metodu ise sıralama yönünü gösteren CSS classını getirecektir. Artan yada Azalan classlarını tablonun class özelliğine parametre olarak geçecektir. Bu sıralamada dikkat edilmesi gereken anguların ng-class direktifini kullanıyor olmamız.
 

HTML: Tablo başlığına tıklandığında veriSirala fonksiyonu çalışacak ve fonksiyon adi ile sıralama yapılacak alan adı parametre olarak fonksiyona gönderilecektir.  ng-class yönergesi model güncellendiğinde bağlı olduğu metodu otomatik olarak çalıştıracak. (Tüm div etiketlerine kullandığım ng-class ifadelerinin hepsinin çalışacağını unutmayın.) ng-class içindeki metod kendisine parametre olarak sıralanacak alan adını almıştır.

siralaClass metodunun içini inceleyecek olursak.  kendisine sutun olarak gelen alanları terenary operatör ile class ataması yapıyor. Bu değerin dısındakileri ise (”) birşey atamıyor.

STYLE:

Belki veriSirala metodun kullanımını açıklamak gerekebilir. Sıralama için sutun adını aldığını ve 3. satırda sutun adını sıralanacak değere aktardığını görmüşşünüzdür.

2. satırda terenary operatör ile sıralama yönünü belirledik. Sıralama şartı yoksa false, varsa tersine çevirme işlemini yaptık.

Aynı şekilde siralaClass metodunun çalışmasından da bahsedelim.  ng-class model değiştiği içindeki metodları çalıştırır. ng-class ile 5 tane aynı isimde metod tanımlanmıştır. her metod kendisine uygun sütün isimlerini parametre olarak göndermektedir.

2.satırdaki if şartı ile hangi div etiketinin etkileneceğini göstermektedir. çevir durumuna göre azalan yada artan sırada olacak.(çevir değerinin sıralama yönünü gösterdiğini unutmayın)

Bu şartın dışındaki tüm etkinlenen divlere ikinci return ” değeri yanı boş değer atanacaktır.

 

HTML & SCRIPT & CSS kodlarını toparlayıp yazacak olursak.

 

 

AngularJS Örnek Uygulama

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