Улучшить эту документацию Просмотреть исходный код 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) включая анимации.
Регистрация элемента управления у его родительской формы.

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

Для получения рекомендаций по использованию ngModel, см.:

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

Для получения основных примеров использования ngModel, см.:

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

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

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

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

например, ngOptions будет делать это, когда в выражении включена track by или если для выбора задан 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-классов на элементе input, присоединенном к модели. Эти классы включают: .ng-pristine, .ng-dirty, .ng-invalid и .ng-valid, а также любые другие проверки, выполняемые на самой модели. Анимации, которые запускаются в ngModel, аналогичны тому, как они работают в ngClass, и анимации можно подключить, используя CSS-переходы, ключевые кадры, а также JS-анимации.

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

//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;
}

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

Примеры

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

Привязка к getter/setter

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

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

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

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

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