AngularJS ile işlevselliği göster ve gizle

AngularJS kullanıcı arayüzündeki farklı değişiklikleri modeldeki değişikliklerle entegre etmemizi sağlar, bununla aşağıdaki gibi öğeleri ayarlayabiliriz. menüler, listeler, bağlantılar vb.., bu şekilde daha interaktif ve dinamik bir deneyim elde ediyoruz.
En çok kullanılan efektlerden biri gösterme ve gizlemedir, çünkü basit bir şekilde bir menüde seçeneklerin kullanıcı veya modelin eylemlerine göre görünmesini veya görünmemesini sağlarız, AngularJS direktiflerle basit bir şekilde birleştirmemize izin verir. ng-shgow Y ng-gizle.
Eğer uygulamamız karmaşıksa mutlaka bağlama duyarlı öğelere sahip olacağız, yani doğru koşullar sağlandığında bir araç kullanabiliriz veya belki belirli koşullar sağlandığında bazı menü seçeneklerini gizlemeliyiz.
ng-göster ve ng-gizlebu sayesinde AngularJS Bunu başarmak çok kolay, bunun için direktifleri kullanacağız. ng-show Y ng-gizle, örneğin her birinin ters işlemine sahip olan ng-show koşulu doğru olduğu sürece öğeyi gösterecek, yanlışsa onu gizleyecek ve ng-gizle koşulu doğru olduğu sürece elemanı gizleyecektir, aksi takdirde gösterecektir.
Dolayısıyla bu işlemlerle, uygulamalarımızda hangisini kullanacağımızı belirleyecek olan mantığımızdır, bu yönergeler, uygulandıkları öğelerin stilleriyle çalışarak çalışır, yani özelliklerle çalışırsak Ekran bloğu göstermek ve görüntü yok bilmediğimiz veya öğrenilemeyecek kadar karmaşık hiçbir şey görmediğimiz için gizlemek.
Aşağıdaki örnekte, onu kontrol eden bir seçeneğe tıkladığımızda bir menü gösterimi yapıp yapmayacağız, bunun için aşağıdakileri yapmalıyız:
1- Bir dosyada HTML dahil edeceğiz AngularJS ve sonra görevimizde bize yardımcı olacak denetleyiciyi oluşturacağız, denetleyici kodu menü eylemlerini kontrol etmeli ve yönergenin durumlarıyla çalışırken değişikliği yapan bir işlev veya yönteme sahip olacak, bu durumda birlikte çalışmak ng-show, gerekli kodu görelim:

 function ShowHideController ($ kapsam) {$ kapsam.menuState = {} $ kapsam.menuState.show = false; $ kapsam.cambiarMenu = işlev () {$ kapsam.menuState.show =! $ kapsam.menuState.show; }; } 

2- Daha sonra yönergeyi uygulayabilmemiz için HTML elementlerimizi hazırlamalıyız. AngularJS, bunun için tanımlıyoruz $ kapsam denetleyicinin ve son olarak yönergeyi uygularız ng-show listeye bakalım:

Menüyü Değiştir 
 
eylem1
eylem2
eylem3

Bununla ilgili butona tıkladığımızda menümüz gösterilmeli veya gizlenmeli, bakalım her iki durumda da tarayıcımızda nasıl görünüyor. Burada menü öğesi olmayan ilk durumu görebiliriz:

Ardından butona tıklayarak menünün nasıl göründüğünü görebiliriz, konsolumuzun algıladığı kod aşağıdadır. Javascript işleyişini göstermek için AngularJS:

Konsol kodunda sınıfın kaybolduğunu fark ettik. ng-gizle böylece menüyü doğru görmenizi sağlar.
Bununla, bir uygulama oluşturduğumuzda show ve hide özelliklerini kullanmayı öğrendiğimiz bu öğreticiyi bitiriyoruz. AngularJS.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.