инструкции input AngularJS

Определение и использование

AngularJS изменяет <input> поведение элементов, но при условии, что существует атрибут ng-model.

Они предоставляют данные привязку, что означает, что они являются частью модели AngularJS и могут быть ссылаться и обновляться в функциях AngularJS и DOM.

Они предоставляют валидацию. Пример: с required атрибут <input> элемент, пока он не будет пустым, его $valid Состояние будет установлено false.

Они также предоставляют управление состоянием. AngularJS сохраняет текущее состояние всех вводных элементов.

У вводных полей есть следующие состояния:

• $untouched Этот段尚未被触碰
• $touched Этот段已被触碰
• $pristine Это поле еще не было изменено
• $dirty Это поле было изменено
• $invalid Содержимое поля недействительно
• $valid Содержимое поля эффективно

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

Пример

Вводная форма с данными привязки:

<input ng-model="myInput">
<p>Значение ввода:</p>
<h1>{{myInput}}</h1>

Попробуйте самому

Грамматика

<input ng-model="name">

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

CSS классы

Внутри приложения AngularJS <input> Элемент получает某些 классы. Эти классы можно использовать для установки стиля в зависимости от состояния ввода элемента.

Добавлены следующие классы:

• ng-untouched Этот段尚未被触碰
• ng-touched Этот段已被触碰
• ng-pristine Это поле еще не было изменено
• ng-dirty Это поле было изменено
• ng-valid Содержимое поля эффективно
• ng-invalid Содержимое поля недействительно
• ng-valid-key Проверка каждого ключа. Например:ng-valid-requiredЭто полезно, когда необходимо проверить несколько事项
• ng-invalid-key Например:ng-invalid-required

Если класс代表着 значение falseЭти классы будут удалены.

Пример

Применение стилей CSS для эффективных и неэффективных элементов ввода:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Попробуйте самому