AngularJS textarea 指令

AngularJS 参考手册

定义和用法

AngularJS 修改 <textarea> 元素的默认行为，但前提是 ng-model 属性存在。

它们提供数据绑定，这意味着它们是 AngularJS 模型的一部分，并且可以在 AngularJS 函数和 DOM 中引用和更新。

它们提供验证。示例：具有 required 属性的 <textarea> 元素，只要它为空，其 $valid 状态就会设置为 false。

它们还提供状态控制。AngularJS 保存所有文本区域元素的当前状态。

文本区域字段有以下状态：

  • $untouched 该字段尚未被触碰
  • $touched 该字段已被触碰
  • $pristine 该字段尚未被修改
  • $dirty 该字段已被修改
  • $invalid 字段内容无效
  • $valid 字段内容有效

每个状态的值代表一个布尔值，为真或假。

实例

带有数据绑定的文本区域：

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

<p>文本区域字段的值为：</p>
<h1>{{myTextarea}}</h1>

亲自试一试

语法

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

通过使用 ng-model 属性的值来引用文本区域元素。

CSS 类

AngularJS 应用程序内的 <textarea> 元素被赋予某些类。这些类可用于根据文本区域元素的状态设置其样式。

添加了以下类：

  • 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>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

亲自试一试

AngularJS 参考手册