AngularJS input 指令



  • 定义和用法

    AngularJS 修改 <input> 元素的默认行为。
    它们提供数据绑定,这意味着它们是 AngularJS 模型的一部分,并且可以在AngularJS 函数和DOM 中进行引用和更新。
    他们提供验证。 示例:具有必需属性的 <input> 元素,将 $valid 状态设置为 false (只要为空)。
    它们还提供状态控制。 AngularJS 保存所有输入元素的当前状态。
    输入框具有以下状态:
    • $untouched 该字段尚未被触及
    • $touched 字段已被触及
    • $pristine 该字段尚未被修改
    • $dirty 字段已被修改
    • $invalid 字段内容无效
    • $valid 字段内容有效
    每个状态的值表示一个布尔值,并且为 truefalse
  • 语法

    <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>