AngularJS textarea 指令

实例

带有数据绑定的 textarea:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="">
<p>你在 textarea 写的所有内容也将成为下面标题的内容:</p>
<textarea ng-model="myTextarea"></textarea>
<p>textarea 的内容是:</p>
<h2>{{myTextarea}}</h2>
</body>
</html>

运行一下

定义与用法

AngularJS 修改 <textarea> 元素的默认行为，但仅当 ng-model 属性存在时。

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

它们提供了验证。示例：<textarea> 元素具有必需属性，只要它是空的，$valid state 就设置为 false。

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

Textarea 字段具有以下状态:

$untouched 这个字段还没有被触及
$touched 这个字段已被触及
$pristine 这个字段尚未修改
$dirty 这个字段已被修改
$invalid 字段内容无效
$valid 字段内容有效

每个状态的值代表一个布尔值，要么为 true，要么为 false。

语法

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

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

CSS 样式类

AngularJS 应用程序中的表单具有特定的样式类。这些类可用于根据窗体的状态设置窗体的样式。

添加了以下类:

ng-pristine 尚未修改任何字段
ng-dirty 一个或多个字段已被修改
ng-valid 表单内容有效
ng-invalid 表单内容无效
ng-valid-key 每次验证一个键。示例：ng-valid-required，在需要验证多个内容时非常有用
ng-invalid-key 示例: ng-invalid-required

如果样式类所表示的值为 false ，则会删除这些类。

实例

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

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<style>
textarea.ng-invalid {
    background-color:pink;
}
textarea.ng-valid {
    background-color:lightgreen;
}
</style>
<body ng-app="">
<p>尝试在 textarea 字段中书写:</p>
<textarea ng-model="myName" required=""></textarea>
<p>文本区域需要内容，因此当你在其中写入时，它会变成绿色。</p>
</body>
</html>

运行一下

AngularJS textarea 指令

实例

定义与用法

语法

CSS 样式类

实例

分类导航