Tekrarlanan bilgileri görüntüleme
Bazen görünümdeki öğelerin bir listesini görüntülememiz gerekebilir, bu nedenle soru, denetleyicimizde tanımlanan öğelerin bir listesini görünüm sayfamıza nasıl görüntüleyebiliriz.
Angular, denetleyicimizde tanımlanan yinelenen değerleri görüntülemek için kullanılabilecek "ng-tekrar" adlı bir yönerge sağlar.
Bunu nasıl başarabileceğimize dair bir örneğe bakalım.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Kod Açıklaması:
- Denetleyicide, önce görünümde tanımlamak istediğimiz liste öğeleri dizimizi tanımlarız. Burada, üç öğe içeren "Konu Adları" adlı bir dizi tanımladık. Her öğe bir ad-değer çiftinden oluşur.
- TopicsNames dizisi daha sonra "konular" adlı üye değişkenine eklenir ve kapsam nesnemize eklenir.
- Dizimizdeki öğelerin listesini görüntülemek için
- (Sırasız Liste) ve
- (Liste Öğesi) HTML etiketlerini kullanıyoruz. Daha sonra, dizimizdeki her bir öğenin üzerinden geçmek için ng-tekrar direktifini kullanırız. "Tpname" kelimesi, konu başlıklarındaki her bir öğeyi işaret etmek için kullanılan bir değişkendir.
- Bunda, her bir dizi öğesinin değerini göstereceğiz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir. Dizinin tüm öğelerinin (Temelde konulardaki Konu Adları) görüntülendiğini göreceksiniz.
Çıktı:
Angularjs Çoklu Denetleyiciler
Gelişmiş bir denetleyici örneği, açısal bir JS uygulamasında birden çok denetleyiciye sahip olma kavramı olabilir.
Farklı iş mantığı işlevlerini ayırmak için birden çok denetleyici tanımlamak isteyebilirsiniz. Daha önce, bir yöntemin sayıların toplanması ve çıkarılması için ayrı işlevlere sahip olduğu bir denetleyicide farklı yöntemlere sahip olduğumuzdan bahsetmiştik. Daha gelişmiş bir mantık ayrımına sahip olmak için birden fazla denetleyiciniz olabilir. Örneğin, sadece sayılar üzerinde işlem yapan ve diğeri dizeler üzerinde işlemler yapan bir denetleyiciniz olabilir.
Angular.JS uygulamasında birden çok denetleyiciyi nasıl tanımlayabileceğimizin bir örneğine bakalım.
Event Registration Guru99 Global Event
{{lname}}
Kod Açıklaması:
- Burada "firstController" ve "secondController" adlı 2 denetleyici tanımlıyoruz. Her denetleyici için ayrıca işleme için bazı kodlar ekliyoruz. FirstController'ımıza "firstController" değerine sahip "pname" adlı bir değişken ekliyoruz ve secondController'de "secondController" değerine sahip "lname" adlı bir değişken ekliyoruz.
- Görünümde, her iki denetleyiciye erişiyoruz ve ikinci denetleyiciden üye değişkenini kullanıyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir. Beklendiği gibi tüm "secondController" metnini göreceksiniz.
Çıktı:
Özet
- Ng-tekrarlayıcı direktifi, birden fazla tekrar eden öğeyi görüntülemek için kullanılabilir.
- Ayrıca, bir uygulamadaki birden fazla denetleyicinin tanımına bakan gelişmiş bir denetleyiciye de göz attık.