Jak używać 'ng-model' w AngularJS z PRZYKŁADAMI

Spisie treści:

Anonim

Co to jest model ng w AngularJs?

ng-model to dyrektywa w Angular.JS, która reprezentuje modele i jej głównym celem jest powiązanie „widoku” z „modelem”.

Na przykład, przypuśćmy, że chcesz zaprezentować użytkownikowi końcowemu prostą stronę, taką jak ta pokazana poniżej, która prosi użytkownika o wpisanie „imienia” i „nazwiska” w polach tekstowych. A potem chciałeś mieć pewność, że przechowujesz informacje, które użytkownik wprowadził do modelu danych.

Możesz użyć dyrektywy ng-model, aby zmapować pola tekstowe „Imię” i „Nazwisko” do modelu danych.

Dyrektywa ng-model zapewni, że dane w „widoku” i „modelu” będą zsynchronizowane przez cały czas.

W tym samouczku nauczysz się:

  • Atrybut ng-model
  • Jak korzystać z ng-model
    • Obszar tekstowy
    • Elementy wejściowe
    • Wybierz element z listy rozwijanej

Atrybut ng-model

Jak omówiono we wstępie do tego rozdziału, atrybut ng-model służy do wiązania danych w modelu z widokiem prezentowanym użytkownikowi.

Atrybut ng-model jest używany do,

  1. Wiązanie kontrolek, takich jak dane wejściowe, obszar tekstowy i zaznacza w widoku do modelu.
  2. Zapewnij zachowanie walidacji - na przykład walidację można dodać do pola tekstowego, w którym można wprowadzić tylko znaki numeryczne.
  3. Atrybut ng-model utrzymuje stan kontrolki (przez stan rozumiemy, że kontrolka i dane muszą być zawsze zsynchronizowane. Jeśli wartość naszych danych ulegnie zmianie, automatycznie zmieni wartość w kontrolce i nawzajem)

Jak korzystać z ng-model

1) Obszar tekstowy

Znacznik obszaru tekstu służy do definiowania wielowierszowej kontrolki wprowadzania tekstu. Obszar tekstowy może pomieścić nieograniczoną liczbę znaków, a tekst jest renderowany czcionką o stałej szerokości.

Spójrzmy teraz na prosty przykład, w jaki sposób możemy dodać dyrektywę ng-model do kontrolki obszaru tekstowego.

W tym przykładzie chcemy pokazać, jak możemy przekazać ciąg wielowierszowy ze sterownika do widoku i dołączyć tę wartość do kontrolki obszaru tekstowego.

Event Registration


Guru99 Global Event


   Topic Description:

   

Objaśnienie kodu:

  1. Dyrektywa ng-model służy do dołączania zmiennej składowej o nazwie „pDescription” do kontrolki „textarea”.

    Zmienna „pDescription” będzie w rzeczywistości zawierać tekst, który zostanie przekazany do kontrolki obszaru tekstowego. Wspomnieliśmy również o 2 atrybutach dla kontrolki textarea, czyli rowery = 4 i cols = 50. Te atrybuty zostały wspomniane, abyśmy mogli pokazać wiele wierszy tekstu. Po zdefiniowaniu tych atrybutów obszar tekstowy będzie miał teraz 4 wiersze i 50 kolumn, dzięki czemu może wyświetlać wiele wierszy tekstu.

  2. Tutaj dołączamy zmienną składową do obiektu zasięgu o nazwie „pDescription” i umieszczamy wartość ciągu w zmiennej.
  3. Zwróć uwagę, że umieszczamy literał / n w ciągu, aby tekst mógł składać się z wielu wierszy, gdy jest wyświetlany w obszarze tekstowym. Literał / n dzieli tekst na wiele wierszy, dzięki czemu można go renderować w kontrolce textarea jako wiele wierszy tekstu.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Z wyjścia

  • Widać wyraźnie, że wartość przypisana do zmiennej pDescription jako część obiektu scope została przekazana do kontrolki textarea.
  • Następnie został wyświetlony po załadowaniu strony.

2) Elementy wejściowe

Dyrektywę ng-model można również zastosować do elementów wejściowych, takich jak pole tekstowe, pola wyboru, przyciski opcji itp.

Spójrzmy na przykład, jak możemy użyć modelu ng z typem danych wejściowych „pole tekstowe” i „pole wyboru”.

Tutaj będziemy mieli typ wprowadzania tekstu, który będzie miał nazwę „Guru99” i będą tam 2 pola wyboru, jedno które będzie domyślnie zaznaczone, a drugie nie będzie zaznaczone.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Objaśnienie kodu:

  1. Dyrektywa ng-model służy do dołączania zmiennej składowej o nazwie „pname” do kontrolki tekstu wejściowego. Zmienna „pname” będzie zawierać tekst „Guru99”, który zostanie przekazany do kontrolki wprowadzania tekstu. Zauważ, że nazwę zmiennej składowej można nadać dowolną nazwę.
  2. Tutaj definiujemy nasze pierwsze pole wyboru "Kontrolery", które jest dołączone do zmiennej składowej Topics.Controllers. Pole wyboru zostanie zaznaczone dla tej kontrolki wyboru.
  3. Tutaj definiujemy nasze pierwsze pole wyboru „Modele”, które jest dołączone do zmiennej składowej Topics.Models. Pole wyboru nie będzie zaznaczone dla tej kontrolki wyboru.
  4. Tutaj dołączamy zmienną składową o nazwie „pName” i umieszczamy wartość ciągu „Guru99”.
  5. Deklarujemy zmienną tablicową o nazwie „Tematy” i podajemy jej dwie wartości, pierwsza to „prawda”, a druga to „fałsz”.

    Więc gdy pierwsze pole wyboru otrzyma wartość true, pole wyboru zostanie zaznaczone dla tej kontrolki i podobnie, ponieważ druga wartość to fałsz, pole wyboru nie zostanie zaznaczone dla tej kontrolki.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Z wyjścia,

  • Widać wyraźnie, że wartość przypisana do zmiennej pName to „Guru99”
  • Ponieważ pierwsza wartość kontrolna to „prawda”, przeszła pomyślnie, pole wyboru jest zaznaczone przy polu wyboru „Kontrolery”. Podobnie, ponieważ druga wartość to fałsz, pole wyboru nie jest zaznaczone dla pola wyboru „Modele”.

3) Wybierz element z listy rozwijanej

Dyrektywę ng-model można również zastosować do elementu select i użyć do zapełnienia elementów listy na liście wyboru.

Spójrzmy na przykład, jak możemy użyć modelu ng z wybranym typem wejścia.

Tutaj będziemy mieli typ wprowadzania tekstu, który będzie miał nazwę „Guru99” i będzie lista wyboru z 2 pozycjami „Kontroler” i „Modele”.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Dyrektywa ng-model służy do dołączania zmiennej składowej o nazwie „Tematy” do kontrolki wyboru typu. Wewnątrz kontrolki wyboru, dla każdej opcji, dołączamy zmienną składową Topics.option1 dla pierwszej opcji i Topics.option2 dla drugiej opcji.
  2. Tutaj definiujemy naszą zmienną tablicową Topics, która zawiera 2 pary klucz-wartość. Pierwsza para ma wartość „Kontrolery”, a druga wartość „Modele”. Te wartości zostaną przekazane w celu wybrania znacznika wejściowego w widoku.

    Jeśli kod zostanie wykonany pomyślnie, zostanie wyświetlony następujący wynik.

Wynik:

Na wyjściu widać, że wartością przypisaną do zmiennej pName jest „Guru99” i widzimy, że kontrolka wyboru wejścia ma opcje „Kontrolery” i „Modele”.

Podsumowanie

  • Modele w Angular JS są reprezentowane przez dyrektywę ng-model. Głównym celem tej dyrektywy jest powiązanie widoku z modelem. Jak zbudować prosty kontroler przy użyciu dyrektyw ng-app, ng-controller i ng-model.
  • Dyrektywę ng-model można połączyć z kontrolką wejściową „obszaru tekstowego”, a ciągi wielowierszowe mogą być przekazywane ze sterownika do widoku.
  • Dyrektywę ng-model można połączyć z kontrolkami wprowadzania danych, takimi jak kontrolki tekstu i pól wyboru, aby uczynić je bardziej dynamicznymi w czasie wykonywania.
  • Dyrektywy ng-model można również użyć do zapełnienia listy wyboru opcjami, które mogą zostać wyświetlone użytkownikowi.