Последние учебники веб-разработки
 

AngularJS Директива ввода

❮ AngularJS Ссылка

пример

Поле ввода с привязки данных:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Попробуй сам "

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

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

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

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

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

Поля ввода имеют следующие состояния:

  • $untouched Поле еще не прикоснулся
  • $touched поле была затронута
  • $pristine Поле еще не изменен
  • $dirty поле было изменено
  • $invalid Содержимое поля не является действительным
  • $valid Содержание поля является действительным

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

Синтаксис

<input ng-model=" name ">

Входные элементы именуются, используя значение ng-model атрибута.

CSS классы

<input> элементы внутри AngularJS приложения приведены некоторые классы. Эти классы могут быть использованы для оформления входных элементов в зависимости от их состояния.

Следующие классы добавляются:

  • ng-untouched поле еще не прикоснулся
  • ng-touched поле была затронута
  • ng-pristine Поле еще не изменен
  • ng-dirty поле было изменено
  • ng-valid Содержание поле действительно
  • ng-invalid Содержание поле не действует
  • ng-valid- key Один ключ для каждой проверки. Пример: ng-valid-required окончания 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>
Попробуй сам "
❮ AngularJS Ссылка