Как использовать ng-model в 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» под контроль «TEXTAREA».

    Переменная «pDescription» фактически будет содержать текст, который будет передан в элемент управления текстовой областью. Мы также упомянули 2 атрибута для элемента управления textarea: rows = 4 и cols = 50. Эти атрибуты были упомянуты, чтобы мы могли отображать несколько строк текста. После определения этих атрибутов текстовое поле теперь будет иметь 4 строки и 50 столбцов, так что оно может отображать несколько строк текста.

  2. Здесь мы присоединяем переменную-член к объекту области видимости под названием «pDescription» и помещаем в переменную строковое значение.
  3. Обратите внимание, что мы помещаем в строку литерал / n, чтобы текст мог состоять из нескольких строк, когда он отображается в текстовой области. Литерал / n разбивает текст на несколько строк, чтобы он мог отображаться в элементе управления textarea как несколько строк текста.

Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.

Выход:

С выхода

  • Хорошо видно, что значение, присвоенное переменной pDescription как часть объекта области, было передано элементу управления textarea.
  • Впоследствии он отображался при загрузке страницы.

2) Элементы ввода

Директива ng-model также может применяться к элементам ввода, таким как текстовое поле, флажки, переключатели и т. Д.

Давайте посмотрим на пример того, как мы можем использовать ng-модель с типом ввода «текстовое поле» и «флажок».

Здесь у нас будет тип ввода текста с именем «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».
  • Поскольку первое пройденное значение проверки - «истина», флажок установлен для флажка «Контроллеры». Точно так же, поскольку второе значение ложно, флажок не установлен для флажка «Модели».

3) Выберите элемент в раскрывающемся списке

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

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

Здесь у нас будет тип ввода текста с именем «Guru99» и будет список выбора с двумя элементами: «Контроллер» и «Модели».

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 также может использоваться для заполнения списка выбора параметрами, которые могут отображаться пользователю.