AngularJS textarea
指令
定义和用法
AngularJS 修改 <textarea>
元素的默认行为,但前提是 ng-model
属性存在。
它们提供数据绑定,这意味着它们是 AngularJS 模型的一部分,并且可以在 AngularJS 函数和 DOM 中引用和更新。
它们提供验证。 示例:具有 required
属性的 <textarea>
元素具有 $valid
状态设置为false
,只要它为空。
它们还提供状态控制。 AngularJS 保存所有 textarea 元素的当前状态。
Textarea 字段具有以下状态:
$untouched
该字段尚未被触及$touched
字段已被触摸$pristine
该字段尚未修改$dirty
该字段已被修改$invalid
字段内容无效$valid
字段内容有效
每个状态的值代表一个布尔值,是true
或false
。。 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>
亲自试一试 »