AngularJS textarea 指令

定义和用法

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

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

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

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

Textarea 字段具有以下状态:

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

每个状态的值代表一个布尔值,是truefalse。。 p>


语法

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

使用 ng-model 属性的值来引用 Textarea 元素。



CSS 类

AngularJS 应用程序中的 <textarea> 元素被赋予特定的 classes。 这些类可用于根据状态设置 textarea 元素的样式。

添加了以下类:

  • ng-untouched该字段尚未被触及
  • ng-touched 字段已被触摸
  • ng-pristine该字段尚未修改
  • ng-dirty字段已修改
  • ng-valid字段内容有效
  • ng-invalid字段内容无效
  • ng-valid-key 每个验证一个 key。 示例:ng-valid-required,当有多个必须验证的东西时很有用
  • ng-invalid-key 示例:ng-invalid-required

如果类表示的值为 false,则删除这些类。

实例

使用标准 CSS 为有效和无效的 textarea 元素应用样式:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
亲自试一试 »