Как да използвам 'ng-модел' в AngularJS с ПРИМЕРИ

Съдържание:

Anonim

Какво е ng-модел в AngularJs?

ng-model е директива в Angular.JS, която представлява модели и основната му цел е да обвърже „изгледа“ с „модела“.

Да предположим например, че сте искали да представите проста страница на крайния потребител като показаната по-долу, която иска от потребителя да въведе „Име“ и „Фамилия“ в текстовите полета. И тогава искате да сте сигурни, че съхранявате информацията, която потребителят е въвел във вашия модел на данни.

Можете да използвате директивата ng-model, за да прикачите полетата на текстовото поле на „Име“ и „Фамилия“ към вашия модел данни.

Директивата ng-model ще гарантира, че данните в "изгледа" и тези на вашия "модел" се синхронизират през цялото време.

В този урок ще научите -

  • Атрибутът ng-model
  • Как да използвам ng-модел
    • Област за текст
    • Входни елементи
    • Изберете падащото меню от елемента

Атрибут ng-model

Както беше обсъдено във въведението към тази глава, атрибутът ng-model се използва за обвързване на данните във вашия модел с изгледа, представен на потребителя.

Атрибутът ng-model се използва за,

  1. Контроли за обвързване като въвеждане, текстова област и селектира в изгледа в модела.
  2. Осигурете поведение за проверка - например, потвърждение може да се добави към текстово поле, в което могат да се въвеждат само цифрови знаци в текстовото поле.
  3. Атрибутът ng-model поддържа състоянието на контрола (Под състояние имаме предвид, че контролата и данните са длъжни да бъдат винаги синхронизирани. Ако стойността на нашите данни се промени, тя автоматично ще промени стойността в контролата и обратно)

Как да използвам ng-модел

1) Текстова област

Маркерът за текстова област се използва за дефиниране на многоредова контрола за въвеждане на текст. Текстовата област може да съдържа неограничен брой знаци и текстът се изобразява с шрифт с фиксирана ширина.

Така че сега нека разгледаме един прост пример за това как можем да добавим директивата ng-model към контрола на текстова област.

В този пример искаме да покажем как можем да предадем многоредов низ от контролера на изгледа и да прикачим тази стойност към контрола на текстовата област.

Event Registration


Guru99 Global Event


   Topic Description:

   

Обяснение на кода:

  1. В директивата ПГ-модел се използва за закрепване на променливата член нарича "pDescription" на "текстовото поле" управление.

    Променливата "pDescription" всъщност ще съдържа текста, който ще бъде предаден на контролата за текстовата област. Също така споменахме 2 атрибута за контрола на textarea, който е редове = 4 и cols = 50. Тези атрибути бяха споменати, за да можем да показваме множество редове текст. Чрез дефинирането на тези атрибути текстовото пространство вече ще има 4 реда и 50 колони, така че да може да показва множество редове текст.

  2. Тук ние прикачваме променливата член към обекта на обхвата, наречен "pDescription" и поставяме стойност на низ към променливата.
  3. Имайте предвид, че поставяме / n литерала в низа, така че текстът да може да бъде от няколко реда, когато се показва в текстовата област. Буквалът / n разделя текста на множество редове, за да може да се визуализира в контролата за текстово поле като множество редове текст.

Ако кодът се изпълни успешно, след стартиране на кода в браузъра ще се покаже следният изход.

Изход:

От изхода

  • Ясно се вижда, че стойността, присвоена на променливата pDescription като част от обекта на обхвата, е предадена на контрола textarea.
  • Впоследствие тя се показва, когато страницата се зареди.

2) Входни елементи

Директивата ng-model може да се приложи и към входните елементи като текстовото поле, квадратчетата за отметка, радио бутоните и т.н.

Нека да разгледаме пример за това как можем да използваме ng-модела с типа на въвеждане „textbox“ и „checkbox“.

Тук ще имаме тип въвеждане на текст, който ще носи името "Guru99" и ще има 2 квадратчета за отметка, едната която ще бъде маркирана по подразбиране, а другата няма да бъде маркирана.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Обяснение на кода:

  1. В директивата ПГ-модел се използва за закрепване на променливата член нарича "pname", за да вход за контрол на тип текст. Променливата "pname" ще съдържа текста на "Guru99", който ще бъде предаден на контрола за въвеждане на текст. Имайте предвид, че всяко име може да бъде дадено на името на променливата член.
  2. Тук дефинираме първата си отметка „Контролери“, която е прикрепена към членската променлива Topics.Controllers. Полето за отметка ще бъде маркирано за тази контролна контрола.
  3. Тук дефинираме нашето първо квадратче за отметка "Модели", което е прикрепено към членската променлива Topics.Models. Полето за отметка няма да бъде маркирано за тази контролна контрола.
  4. Тук ние прикачваме променливата член, наречена "pName" и поставяме низова стойност на "Guru99".
  5. Декларираме променлива на масив член, наречена "Теми", и й даваме две стойности, първата е "вярно", а втората е "невярно".

    Така че, когато първото квадратче за отметка получи стойността на true, квадратчето за отметка ще бъде маркирано за тази контрола и по същия начин, тъй като втората стойност е false, квадратчето за отметка няма да бъде маркирано за тази контрола.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

Изход:

От изхода,

  • Ясно се вижда, че стойността, присвоена на променливата pName, е "Guru99"
  • Тъй като първата контролна стойност е "true", тя е преминала, квадратчето за отметка е маркирано за квадратчето "Controllers". По същия начин, тъй като втората стойност е false, квадратчето за отметка не е маркирано за квадратчето "Модели".

3) Изберете падащото меню от елемента

Директивата ng-model може също да се приложи към елемента select и да се използва за попълване на елементите от списъка в списъка за избор.

Нека разгледаме пример за това как можем да използваме ng-модела с избрания тип вход.

Тук ще имаме тип въвеждане на текст, който ще носи името "Guru99" и ще има списък за избор с 2 елемента от списъка на "Контролер" и "Модели".

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. В директивата ПГ-модел се използва за закрепване на променливата член наречена "Теми", за да изберете тип контрола. Вътре в контролата за избор, за всяка от опциите, ние прикачваме променливата член на Topics.option1 за първата опция и Topics.option2 за втората опция.
  2. Тук дефинираме нашата променлива масив Topics, която съдържа 2 двойки ключ-стойност. Първата двойка има стойност "Контролери", а втората има стойност "Модели". Тези стойности ще бъдат предадени за избор на входен таг в изгледа.

    Ако кодът се изпълни успешно, ще се покаже следният изход.

Изход:

От изхода може да се види, че стойността, присвоена на променливата pName, е "Guru99" и можем да видим, че контролата за избор на вход има опциите на "Контролери" и "Модели".

Обобщение

  • Моделите в Angular JS са представени от директивата ng-model. Основната цел на тази директива е да обвърже изгледа с модела. Как да изградим обикновен контролер, използвайки директивите ng-app, ng-controller и ng-model.
  • Директивата ng-model може да бъде свързана с контрола за въвеждане на "текстова област" и многоредови низове могат да бъдат предадени от контролера към изгледа.
  • Директивата ng-model може да бъде свързана с контроли за въвеждане, като текст и контролни бутони, за да ги направи по-динамични по време на изпълнение.
  • Директивата ng-model може също да се използва за попълване на списък за избор с опции, които могат да бъдат показани на потребителя.