AngularJS textarea
指令
示例
带有数据绑定的 textarea
<textarea ng-model="myTextarea"></textarea>
<p>textarea 字段的值是:</p>
<h1>{{myTextarea}}</h1>
自己动手试一试 »
定义和用法
AngularJS 修改了 <textarea>
元素的默认行为,但前提是必须存在 ng-model
属性。
它们提供数据绑定,这意味着它们是 AngularJS 模型的一部分,并且可以在 AngularJS 函数和 DOM 中引用和更新。
它们提供验证。例如:一个带有 required
属性的 <textarea>
元素,只要它是空的,它的 $valid
状态就会被设置为 false
。
它们还提供状态控制。AngularJS 维护所有 textarea 元素的当前状态。
Textarea 字段具有以下状态
$untouched
字段尚未被触摸$touched
字段已被触摸$pristine
字段尚未被修改$dirty
字段已被修改$invalid
字段内容无效$valid
字段内容有效
每种状态的值代表一个布尔值,要么是 true
,要么是 false
。
语法
<textarea ng-model="name"></textarea>
Textarea 元素通过使用 ng-model
属性的值来引用。
CSS 类
AngularJS 应用程序内的 <textarea>
元素会被赋予特定的类。这些类可以用来根据其状态来设置 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>
自己动手试一试 »