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

AngularJS Директива TextArea

❮ AngularJS Ссылка

пример

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

<textarea ng-model="myTextarea"></textarea>

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

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

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

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

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

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

TEXTAREA поля имеют следующие состояния:

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

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

Синтаксис

<textarea ng-model=" name "></textarea>

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

CSS классы

<textarea> элементы внутри 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>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
Попробуй сам "
❮ AngularJS Ссылка