Cumartesi , 21 Ocak 2017
Anasayfa » JavaScript » AngularJS » AngularJS Arama Filtresi 2

AngularJS Arama Filtresi 2

Daha önceki yazımızda angularjs ile basit arama işlemi yapmıştık. Bu yazıda birden fazla özelliğe göre arama filitrelemesi nasıl oluşturulacağını inceleyeceğiz.

Aşağıdaki örnekte arama yapmak için iki tane textbox kutumuz mevcut. Birinci kutuda isme göre arama, ikinci kutuda da cinsiyete göre arama yapılmaktadır. İki textboxa da değer girişi olduğunda tüm eşleşen satırlarlara göre süzme işlemi yapılmış olacaktır.

search-filter-angular-exact

 

Tam Eşleştir işlemi yapan checkbox nesnesi ise ad ve soyad değerlerinin ikisini de BİREBİR AYNI İSE EKRANA GÖSTERECEKTİR. İçerisinde geçmesi yeterli olmayın kelimenin aynısını yazmayı zorlamaktadır. (Açıklayıcı olması için çalışma mantığı: checkbox kaldırılırsa sqldeki LIKE gibi çalışacak, checkbox aktifleştirilirse sqldeki = gibi çalışacaktır.)

SCRIPT: Daha önceki örneklerde olduğu gibi yine personel modelini ve controllerını kullanarak örneği açıklayalım.

 

HTML :filter kısımda arama filtresi textbox kutularındaki cinsiyet ve isim değerlerini almaktadır. tamEslestir  ifadesi ise bire bir aynı olması için yine filter değerine eklenmiştir.

 

HTML & SCRIPT:

Tek arama kutusu ile iki alana göre arama işlemini nasıl yapılır?

Aşağıdaki textbox ile isim ve soyisme göre arama yapmaktadır. Biraz açıklayalım. arama Modelinin adını araMetin olarak değiştirdik. $scope.arama adında bir tane metot oluşturduk.  arama metotuna ng-repeat içindeki her satır tek tek item olarak gönderiliyor. if şartı  araMetin modelini bulmazsa true değerini dödürüp tüm alanlara göre arama yaptırıyor. Bizim için önemli olan araMetin varsa (ki var) model içindeki isim ve soyisim ile eşleşirse true değerini döndürecek ve o satırı ekrana gösterecektir.

 

search-filter-angular-2

Kodlarımızı  toparlayıp yeniden yazarsak;

SCRIPT:

 

HTML:

 

HTML & SCRIPT:

 

ANGULARJS ÖRNEK UYGULAMA

 

Hakkında Hayri

İlginizi Çekebilir

AngularJS $anchorscroll Servis Kullanımı

$anchorscroll servisi sayfada belirtilen bir noktaya hareket etmek için kullanılır.  Bu yazıda $anchorscroll, $location servisleri ve $anchorscroll() …

Bir Cevap Yazın

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

Wordpress Tema indir