Monthly Archives :

June 2016

AngularJS – Dinamik Değişken 980 400 mezo

AngularJS – Dinamik Değişken

Merhaba arkadaşlar
Bildiğiniz gibi AngularJS de html ile js dosyası arasındaki bağı scope ile sağlıyorduk. Yani controller üzerinde tanımladığımız bır scope nesnesini html üzerinde {{}} veya ng-bind ile çağırabiliyoruz. Bahsettiğimiz değişkenler sabit tanımlanıp görüntülenenler. Bir de JS tarafında tanımlayabildiğimiz değişkenler var ki bu yazımızın konusuda budur zaten 🙂

Hemen HTML kodlarımızı yerlestirelim
[codebox 1]

ve Controller kodlarımız
[codebox 2]

Burada tanımladığımız $scope.dynamicVariable = {}; objemiz içersine istenilen miktarda değişken tanımlanabilir ve HTML tarafından da {{dynamicVariable[company.CompanyID]}} şeklinde kullanabiliyoruz.

ve AngularJS ile dinamik değişkenimiz hayırlı olsun 🙂 Bu da ornegimiz.

Umarım Yararlı Olur
Bilgiyle Kalın
M.Zeki OSMANCIK

AngularJS – Basit Search Filter 1024 789 mezo

AngularJS – Basit Search Filter

Merhaba arkadaşlar
Bu kez de AngularJS ile çooooooook ama çok basit şekilde listelediğimiz nesneler üzerinde bir Text input ile nasıl arama yapabiliriz sorusunun cevabını 2 satırda bir fiddle’da paylaşmak istiyorum.

Bu datayı AngularJS ile Controller içersinde oluşturalım ve bir $scope değiskeni içersine şu şekli tanımlamamız gerekiyor .
[codebox 2]

ve her zaman olduğu gibi HTML kodlarımızı bir oluşturalım ve listeme işlemini gerçekleştirelim.
[codebox 1]

Bu asamadan sonra JSON nesnemizin içersindeki elemanların ekranımıza listelendiğini görebileceksiniz.

İş arama kısmına geldiğinde ise HTML de de şu şekli bir değişiklik yapmamız gerekmekte.

[codebox 3]

Burada kullandığımız FILTER bizim listelediğimiz JSON nesnesi ya da array içersinde input üzerine tanımladığımız ng-model yardımı ile filtreleme yapıp $scope.companyList adında ki objeye atama yapar böylelikle siz de listeye abc yazdığınızda listedeki abc yi bularak $scope.companyList nesnesine atamasını yaparak bizlere gösterir 🙂

Benim yorumlamam bu kadar 🙂
Iste bu kadar basıt 🙂
Örnek kodu Fiddle’dan inceleyebilirsiniz.

Umarım Yararlı Olur
Bilgiyle Kalın.
M.Zeki OSMANCIK

    Join our Newsletter

    We'll send you newsletters with news, tips & tricks. No spams here.