AngularJS input 指令

定义和用法

AngularJS 修改 <input> 元素的默认行为。

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

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

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

输入框具有以下状态：

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

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

语法

<input ng-model="name">

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

CSS 类

AngularJS 应用程序中的 <input> 元素具有特定的类。这些类可用于根据 <input> 元素的状态来设置其样式。

添加了以下类：

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为有效和无效的input元素应用样式：

<!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>尝试在输入字段中编写：</p>
    <form name="myForm">
        <input name="myName" ng-model="myName" required>
        <p>输入字段需要内容，因此在您输入时将变为绿色。</p>
    </form>

</body>
</html>

尝试一下

定义和用法

语法

CSS 类

示例

相关页面