AngularJS textarea 指令

定义和用法

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

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

他们提供验证。示例：具有必需属性的 <textarea> 元素，将$ valid状态设置为 false（只要为空）。

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

Textarea字段具有以下状态：

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

每个状态的值表示一个布尔值，并且为 true 或 false。

语法

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

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

CSS 类

AngularJS 应用程序中的 <textarea> 元素具有特定的类。这些类可用于根据 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为有效和无效的textarea元素应用样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<style>
    input.ng-invalid {
        background-color:pink;
    }
    input.ng-valid {
        background-color:lightgreen;
    }
</style>
</head>
<body ng-app="">
    <p>尝试在textarea字段中编写</p>
    <textarea ng-model="myName" required>
    <p>textarea字段需要内容，因此在您输入时将变为绿色。</p>
</body>
</html>

尝试一下

AngularJS textarea 指令

定义和用法

语法

CSS 类

示例

相关页面