Як використовувати 'ng-модель' у AngularJS з ПРИКЛАДАМИ

Зміст:

Anonim

Що таке ng-модель у AngularJs?

ng-model - це директива в Angular.JS, яка представляє моделі, і її основною метою є прив'язка "подання" до "моделі".

Наприклад, припустимо, ви хотіли представити кінцевому користувачеві просту сторінку, як показано нижче, яка просить користувача ввести "Ім'я" та "Прізвище" у текстові поля. А потім ви хотіли забезпечити збереження інформації, яку користувач ввів у вашу модель даних.

Ви можете використовувати директиву ng-model, щоб зіставити поля текстового поля "Ім'я" та "Прізвище" з вашою моделлю даних.

Директива ng-model забезпечить синхронізацію даних у "поданні" та даних вашої "моделі".

У цьому підручнику ви дізнаєтесь-

  • Атрибут ng-model
  • Як користуватися ng-моделлю
    • Область тексту
    • Елементи введення
    • Виберіть випадаючу форму елемента

Атрибут ng-моделі

Як обговорювалось у вступі до цього розділу, атрибут ng-model використовується для прив'язки даних у вашій моделі до подання, представленого користувачеві.

Атрибут ng-model використовується для,

  1. Елементи керування прив’язуванням, такі як введення, область тексту та виділення у поданні в модель.
  2. Забезпечте поведінку перевірки - наприклад, перевірку можна додати до текстового поля, щоб до текстового поля можна було вводити лише цифрові символи.
  3. Атрибут ng-model підтримує стан контролю (під станом ми маємо на увазі, що елемент керування та дані завжди повинні синхронізуватися. Якщо значення наших даних змінюється, це автоматично змінить значення в елементі управління та навпаки)

Як користуватися ng-моделлю

1) Область тексту

Тег області тексту використовується для визначення багаторядкового елемента керування введенням тексту. Область тексту може містити необмежену кількість символів, а текст відображається шрифтом фіксованої ширини.

Тож давайте розглянемо простий приклад того, як ми можемо додати директиву ng-model до елемента керування текстовою областю.

У цьому прикладі ми хочемо показати, як ми можемо передати багаторядковий рядок від контролера до подання та приєднати це значення до елемента управління текстовою областю.

Event Registration


Guru99 Global Event


   Topic Description:

   

Пояснення коду:

  1. Директива нг-модель використовується для прикріплення змінної - члена під назвою «pDescription» під контроль «TEXTAREA».

    Змінна "pDescription" фактично міститиме текст, який буде передано елементу управління текстовою областю. Ми також згадали 2 атрибути для елемента керування текстовою областю, який становить рядки = 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".

    Отже, коли перший прапорець отримує значення true, прапорець буде позначений для цього елемента керування, а також, оскільки друге значення хибне, прапорець не буде позначений для цього елемента керування.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

З виходу,

  • Видно чітко, що значення, призначене змінній pName, є "Guru99"
  • Оскільки першим контрольним значенням є "істина", воно пройшло, прапорець позначено для прапорця "Контролери". Так само, оскільки друге значення хибне, прапорець не позначений для прапорця "Моделі".

3) Виберіть випадаючу форму елемента

Директива ng-model також може бути застосована до елемента select і використовуватись для заповнення елементів списку у списку select.

Давайте розглянемо приклад того, як ми можемо використовувати ng-модель із вибраним типом введення.

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

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Директива нг-модель використовується для прикріплення змінного - члена під назвою «Тема» для вибору типу управління. Всередині елемента керування select для кожного з параметрів ми додаємо змінну-член 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 також може бути використана для заповнення списку вибору опціями, які можуть відображатися користувачеві.