zoukankan      html  css  js  c++  java
  • ng-model 指令

    ng-model 指令 绑定 HTML 元素 到应用程序数据。

    ng-model 指令也可以:

    • 为应用程序数据提供类型验证(number、email、required)。
    • 为应用程序数据提供状态(invalid、dirty、touched、error)。
    • 为 HTML 元素提供 CSS 类。
    • 绑定 HTML 元素到 HTML 表单。

     

    双向绑定

    <div ng-app="myApp" ng-controller="myCtrl">

        名字: <input ng-model="name">

        <h1>你输入了: {{name}}</h1>

    </div>

    验证用户输入

    <form ng-app="" name="myForm">

        Email:

        <input type="email" name="myAddress" ng-model="text">

        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

    </form>

    应用状态

    ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

    <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

        Email:

        <input type="email" name="myAddress" ng-model="myText" required></p>

        <h1>状态</h1>

        {{myForm.myAddress.$valid}}

        {{myForm.myAddress.$dirty}}

        {{myForm.myAddress.$touched}}

    </form>

    属性

    描述

    $dirty

    表单有填写记录

    $valid

    字段内容合法的

    $invalid

    字段内容是非法的

    $pristine

    表单没有填写记录

    CSS 类

    ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:

    <style>

    input.ng-invalid {

        background-color: lightblue;

    }

    </style>

    <body>

     <form ng-app="" name="myForm">

        输入你的名字:

        <input name="myAddress" ng-model="text" required>

    </form>

    ng-model 指令根据表单域的状态添加/移除以下类:

      • ng-empty
      • ng-not-empty
      • ng-touched
      • ng-untouched
      • ng-valid
      • ng-invalid
      • ng-dirty
      • ng-pending
      • ng-pristine

    本文来自博客园,作者:广林,转载请注明原文链接:https://www.cnblogs.com/guanglin/p/5200097.html

  • 相关阅读:
    ajax全套
    url设计规范
    内置下划线方法
    rest_framework视图
    rest_framework
    数据库设置
    HDU 6231
    HDU 6242
    CodeForces 546D
    CodeForces 940E
  • 原文地址:https://www.cnblogs.com/guanglin/p/5200097.html
Copyright © 2011-2022 走看看