参考手册
AngularJS 参考
form
textarea
返回 AngularJS 参考

AngularJS input 指令

实例

具有数据绑定的输入字段:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body ng-app="">
  6. <p>您在输入字段中写的所有内容也将成为下面标题的内容:</p>
  8. <input ng-model="myInput">
  10. <p>输入字段的内容是:</p>
  11. <h2>{{myInput}}</h2>
  13. </body>
  14. </html>
运行一下

定义与用法

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

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

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

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

输入字段具有以下状态:

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

每个状态的值都代表一个布尔值，可以是 true，也可以是 false。

语法

  1. <input ng-model="name">

使用 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 为有效和无效的输入元素应用样式:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <style>
  5. input.ng-invalid {
  6.     background-color:pink;
  7. }
  8. input.ng-valid {
  9.     background-color:lightgreen;
  10. }
  11. </style>
  12. <body ng-app="">
  14. <p>尝试在输入字段中写入:</p>
  16. <input ng-model="myName" required="">
  18. <p>输入字段需要内容，因此在写入时将变为绿色。</p>
  20. </body>
  21. </html>
运行一下
form
textarea

分类导航