Улучшить эту документацию Просмотреть исходный код ngModel

директива в модуле ng

Обзор

Директива ngModel связывает input,select, textarea (или пользовательский элемент управления формой) со свойством в области видимости с использованием NgModelController, который создается и предоставляется этой директивой.

ngModel отвечает за:

Связывание представления с моделью, что необходимо другим директивам, таким как input, textarea или select.
Обеспечение поведения валидации (например, обязательное поле, число, адрес электронной почты, URL).
Поддержание состояния элемента управления (валидно/невалидно, грязно/чисто, затронуто/не затронуто, ошибки валидации).
Установка связанных CSS-классов на элемент (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty ), включая анимации.
Регистрация элемента управления у родительской формы form.

Примечание: ngModel будет пытаться связаться со свойством, полученным путем вычисления выражения в текущей области видимости. Если свойства еще нет в этой области видимости, оно будет неявно создано и добавлено в область видимости.

Рекомендации по использованию ngModel, см.:

Понимание областей видимости

Примеры базового использования ngModel, см.:

Сложные модели (объекты или коллекции)

По умолчанию ngModel отслеживает модель по ссылке, а не по значению. Это важно знать при связывании входных данных с моделями, которые являются объектами (например, Date) или коллекциями (например, массивами). Если изменяются только свойства объекта или коллекции, ngModel не будет уведомлен, и поэтому входные данные не будут перерендерены.

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

Некоторые директивы имеют параметры, которые заставят их использовать пользовательскую $watchCollection для выражения модели.

например, ngOptions сделает это, когда в выражении понимания будет включена track by или если для select будет задан атрибут multiple.

Метод $watchCollection() выполняет только сравнение по значениям верхнего уровня, что означает, что изменение свойств глубже первого уровня объекта (или изменение только свойств элемента в коллекции, если это массив) всё равно не вызовет перерендеринг модели.

CSS-классы

Следующие CSS-классы добавляются и удаляются на связанном элементе input/select/textarea в зависимости от валидности модели.

ng-valid: модель валидна
ng-invalid: модель невалидна
ng-valid-[key]: для каждого валидного ключа, добавленного $setValidity
ng-invalid-[key]: для каждого невалидного ключа, добавленного $setValidity
ng-pristine: элемент управления еще не взаимодействовал
ng-dirty: элемент управления взаимодействовал
ng-touched: элемент управления потерял фокус
ng-untouched: элемент управления не потерял фокус
ng-pending: все $asyncValidators не выполнены
ng-empty: представление не содержит значения или значение считается «пустым», как определено методом ngModel.NgModelController
ng-not-empty: представление содержит непустое значение

Обратите внимание, что ngAnimate может обнаруживать каждый из этих классов при добавлении и удалении.

Информация о директиве

Эта директива выполняется на уровне приоритета 1.

Использование

как атрибут:

<ANY
  ng-model="expression">
...
</ANY>

Аргументы

Параметр	Тип	Подробности
ngModel	`expression`	присваиваемое Выражение для привязки.

Анимации

Анимации в моделях запускаются, когда любой из связанных CSS-классов добавляется и удаляется на элементе ввода, прикрепленном к модели. Эти классы включают: .ng-pristine, .ng-dirty, .ng-invalid и .ng-valid, а также любые другие проверки, выполняемые на самой модели. Анимации, которые запускаются в ngModel, аналогичны их работе в ngClass, и анимации можно подключить с использованием CSS-переходов, ключевых кадров и JS-анимаций.

Следующий пример демонстрирует простой способ использования CSS-переходов для форматирования элемента ввода, который был отображен как невалидный после проверки:

//be sure to include ngAnimate as a module to hook into more
//advanced animations
.my-input {
  transition:0.5s linear all;
  background: white;
}
.my-input.ng-invalid {
  background: red;
  color:white;
}

Нажмите здесь, чтобы узнать больше о шагах, вовлеченных в анимацию.

Примеры

Базовое использование

Связывание с геттером/сеттером

Иногда полезно связать ngModel с функцией геттера/сеттера. Геттер/сеттер — это функция, которая возвращает представление модели при вызове без аргументов и устанавливает внутреннее состояние модели при вызове с аргументом. Иногда это полезно для моделей, у которых внутреннее представление отличается от того, что модель предоставляет представлению.

Рекомендация: Лучше всего сохранять геттеры быстрыми, потому что AngularJS, вероятно, будет вызывать их чаще, чем другие части вашего кода.

Вы используете это поведение, добавив ng-model-options="{ getterSetter: true }" к элементу, к которому прикреплен ng-model. Вы также можете добавить ng-model-options="{ getterSetter: true }" к <form>, что позволит использовать это поведение для всех <input> в нём. См. ngModelOptions для получения дополнительной информации.

Следующий пример демонстрирует, как использовать ngModel с геттером/сеттером:

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.7.8/docs/api/ng/directive/ngModel