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="myInput"> <p>输入框的值为:</p> <h1>{{myInput}}</h1>
语法
<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>