AngularJS input 指令
定义和用法
AngularJS 修改了 <input> 元素的默认行为，但前提是存在 ng-model 属性。
它们提供数据绑定，这意味着它们是 AngularJS 模型的一部分，并且可以在 AngularJS 函数和 DOM 中进行引用和更新。
它们提供验证。例如：带有 required 属性的 <input> 元素，只要为空，其 $valid 状态就会设置为 false。
它们还提供状态控制。AngularJS 保留所有输入元素的当前状态。
输入字段具有以下状态
$untouched字段尚未被触碰$touched字段已被触碰$pristine字段尚未被修改$dirty字段已被修改$invalid字段内容无效$valid字段内容有效
每个状态的值表示一个布尔值，并且为 true 或 false。
语法
<input ng-model="name">
通过使用 ng-model 属性的值来引用输入元素。
CSS 类
AngularJS 应用程序中的 <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 为有效和无效的输入元素应用样式
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
亲自试一试 »
