AngularJS - Formlardaki Girdiler

Form Veri Yönetimi

Web uygulamalarında kullanıcı verilerini elde etmenin en doğal yolu formlardır, onlarla metin veya onay kutuları gibi basit onayları yakalayan öğeler oluşturabiliriz, ancak tüm bunlar kullanıcı verileri olarak çevrilebilir, onlarla farklı işlemler yapabiliriz.
İçinde AngularJS Bu veri girişleriyle çalışmak çok basittir, çünkü kütüphanenin tasarlanma biçiminden dolayı, aldığımız bu verilerin bir kısmını uygulamamızda eylemlere dönüştürerek ya hesaplamalar yapmak ya da davranışını tanımlamak için kullanabiliriz.
Bu bölümde, AngularJS kullanarak formlardaki girdilerin nasıl ele alınacağını biraz daha göreceğiz.
O nasıl çalışır?Girdi öğeleri ile mantığımız arasındaki birliği nasıl yapabiliriz? AngularJS çok basit, özelliği kullanmamız gerekiyor ng-modeli ve her şey bir tür ilişki alacak, bu yüzden forma göre girdiğimiz şeyin değeri manipüle edilebilir. AngularJS, bu geçerli olabilir giriş metni, radyo düğmeleri, onay kutusu vb..
Aşağıda açıkladığımız şeyin küçük bir örneğini görelim:

Burada olan şey, kapsamında Kontrolörümüz kullanıcının ne yaptığını manipüle edebiliriz işaretleyici onay kutusu, o zaman kullanıcı işaretlerse, hemen alacağız işaretleyici doğru olarak ve işaretini kaldırırsanız, tam tersi cevaba sahip olacağız.
Biraz daha ileri gidebiliriz ve içeri girebiliriz Kontrolörümüz o işaretleyici varsayılan olarak işaretlenir, ardından kullanıcı sayfayı ilk kez gördüğünde onay kutusu işaretlenir.
Eylem Ekle
Ancak yalnızca kalmamız gereken verileri yakalamakla kalmayıp, girdileri aldıktan sonra eylemleri de dahil edebiliriz ve buna ihtiyacımız da vardır. AngularJS Girdi elemanımızın bir olayında çalıştırılan fonksiyonları ve yöntemleri çağırabiliriz, örneğin bir taahhüt yapmak için yatırım tahminini alan küçük bir hesap makinesi yapacağız, yapacağımız şey alınan değeri 10 ile çarpmak, hadi görmek:
1- Öncelikle kullanacağımız HTML elemanlarını oluşturmalıyız, bir önceki örnekte olduğu gibi bir controller oluşturacağız ve girdi modelimizin bir parçası olacak:

BÜYÜT

2- Yeni bir özellik tanıttığımızı görüyoruz ng-değişimi ve çağrıyı adlı bir işleve atadık. calculoInversion () Bu, giriş alanımız her değiştiğinde, gördüğümüz gibi çok basit bir şey olduğu için işlevin çağrılacağı anlamına gelir.
3- Şimdi kodu şu şekilde oluşturacağız: AngularJS bu gördüklerimize hayat verecek:

4- Uygun denetleyiciyi kuruyoruz, sonra model için bir başlangıç ​​değeri belirtiyoruz, bu durumda onu 0'a eşitliyoruz, bu her iki öğeyi de içeriyor Tahmini Başlangıç Ne gerekli, sonra fonksiyonu oluşturuyoruz calculoInversion () Bunu denetleyicimizin sözde kapsamı içinde yaptığımızı görüyoruz, bu şekilde elementimizle ilişkilendiriliyor. Bununla uygulamamız temel düzeyde çalışmalıdır.
Elbette bu örnekte birkaç doğrulama eksiktir ve yalnızca kullanıcı giriş metninin değerini değiştirdiğinde dikkate alınır, ancak aşağıdakilerle yazılmış uygulamalarımızda eylemleri dahil etmek için bir giriş işlevi görür. AngularJS.
Öncesisayfa 1 / 2Sonraki