03_AngularJs_ngRepeat_Filter

Merhaba arkadaşlar, bu yazımda ng-repeat direktive ni inceleyeceğiz.  Önceki yazıda $scope nesnesini ve controller konularını anlatmıştım. Şimdi kodumuzu paylaşalım ve kod üzerinden anlatım yapalım:

ng-app ile uygulamamız ve ng-controller ile de controller tanımlanmış.

ng-init => İlk değer ataması yapar. Yani names adında bir diziye ilk değerleri atadık.

ng-repeat => Hangi tag içerisinde kullanıldıysa o tagın içerisinde diziyi döngü olarak döndürür.

Yukarıda names dizisine ilk değer ataması yapmıştık. Burada names dizisinin uzunluğu ne kadarsa o kadar <li> oluşturur ve iteratör olarak name kullanılır. Yani names de ki her bir değeri name iteratörüne atayarak döngü oluşturur.  Bu örnekte ilk değer atamasını ng-init ile yaptık.

Burada yine aynı şekilde bir döngü oluşturduk fakat surnames dizisine ilk değer atamasını controllerımızda $scope nesnesi ile yaptık.

Burada bir input oluşturuldu ve ng-model ile girilen değer search modeline atadık. <li> içerisinde ng-repeat ile app.js dosyamızda oluşturduğumuz objects dizimizi bu direktif ile yazdırıyoruz. Yeni olarak gördüğümüz |orderBy=’name’ ile filtre işlemi uygulayarak sıralama yaptık. Eğer input elementimize bir değer girildiğinde filter: search ile girilen değere göre arama işlemi yapılıyor.

 Şimdi search alanına bir değer girelim ve arama yapalım.Görüldüğü üzere an kelimesinin bulunduğu isimler listelendi. Bu yazımı burada bitiriyorum diğer yazılarımda görüşmek üzere…

Print Friendly, PDF & Email

Bir cevap yazın

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