AngularJS #5 – Filtreler ve Formlar

Merhaba arkadaşlar,

Bu derste sizlerle birlikte AngularJS’te filtreler ve formları inceleyeceğiz. İlk olarak filter ve formlar nelerdir bunları bilmemiz gerekiyor.

Filters: Belli bir dizinin içindeki verileri filtrelememizi sağlar.

Forms: ng-submit gibi direktiflerle direk olarak scope gezegenimize veri ekletebiliyoruz.

Hemen videoyu izlemek istiyorum derseniz aşağıdan izleyebilir ya da makaleden göz atabilirsiniz;

İlk olarak filtrelere bakacak olursak;

Filter için bizim cümleciğimiz ng-model’dan alıyor örneğin bir inputumuz var ve ng-model değeri search

 

 

<input type="text" ng-model="search" placeholder="Aranacak kelimeyi girin" />

 

Şimdi buraya kadar her şey güzel fakat bunu nerde uygulayabileceğiz? Bunu uygulamanın mantığı bir şeyler listeliyoruz ki bunları filtrelemek istiyoruz listelediğimiz yerde ng-repeat direktifinin şu şekilde olduğunu varsayalım: kisi in kisiler şimdi burada şu şekilde işlem yapacağız | filter : search işte bu kadar.

Filtreler bu şekilde form kısmında ise ng-submit  direktifini kullanmayı ve AngularJS Fonksiyon kullanımına bakmamız gerekiyor.

O da şu şekilde;




<form ng-submit="kisiEkle();">

<input type="text" ng-model="name" placeholder="İsim Girin" />;

<input type="text" ng-model="age" placeholder="Yaş" />

<input type="submit" value="Ekle" />

</form>



Şimdi burada form gönderildiği anda kisiEkle fonksiyonumuz çalışacak. Artık tek yapmamız gereken push ile daha önce oluşturduğumuz diziye veri ekletmek, bu kısmı ise şu şekilde yapıyoruz;

 

$scope.kisiler.push({
  name: $scope.name,
  age: $scope.age
});

kisiler adındaki daha önceden oluşturduğum dizime push ile iteledim yani ekledim. Aslında bu kadar basit angularjs ile işlem yapabilmek. Kaynak kodları aşağıda bulabilirsiniz ve bir sorun olursa yorum kutucuğunu kullanabilirsiniz, diğer derslerde görüşmek üzere kolay gelsin 🙂

 

See the Pen AngularJS Eğitimi #5 by Eftal Yurtseven (@eftalyurtseven) on CodePen.

 

AngularJS #5 – Filtreler ve Formlar” üzerine bir düşünce

Bir Cevap Yazın