1、AngularJS ng-model 指令
　　1.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
　　2.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
　　　　双向绑定：双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改
　　　　验证用户输入：
　　　　eg：

<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)
　　　　eg：

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

　　　　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>

　　3.ng-model 指令根据表单域的状态添加/移除以下类：
　　　　ng-valid: 验证通过
　　　　ng-invalid: 验证失败
　　　　ng-valid-[key]: 由$setValidity添加的所有验证通过的值
　　　　ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
　　　　ng-pristine: 控件为初始状态
　　　　ng-dirty: 控件输入值已变更
　　　　ng-touched: 控件已失去焦点
　　　　ng-untouched: 控件未失去焦点
　　　　ng-pending: 任何为满足$asyncValidators的情况

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        input.ng-invalid {

            background-color: lightblue;

        }

    </style>

    <script src="js/angular.min.js"></script>

</head>

<body>

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

        <!-- ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定 -->

        名字:

        <input ng-model="name">

        <!-- 双向绑定 -->

        名字:

        <input ng-model="name">

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

        <!-- 验证用户输入 -->

        <form name="validForm" ng-init="FormText = 'test@runoob.com'">

            Email:

            <input type="email" name="myEmail" ng-model="FormText">

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

        </form>

        <p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

        <!-- 应用状态 -->

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

            Email:

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

            <p>编辑邮箱地址，查看状态的改变。</p>

            <h1>状态</h1>

            <p>Valid: {{StateForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>

            <p>Dirty: {{StateForm.myAddress.$dirty}} (如果值改变则为 true)。</p>

            <p>Touched: {{StateForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

        </form>

        <!-- CSS 类 -->

        <form name="myForm">

            输入你的名字:

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

        </form>

        <p>编辑文本域，不同状态背景颜色会发生变化。</p>

        <p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

    </div>

</body>

</html>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope) {

        //绑定和双向绑定

        $scope.name = "John Doe";

        //验证用户输入

    });

</script>

AngularJS学习之旅—AngularJS 模型(四)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  3. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  6. AngularJS学习之旅—AngularJS Select(十)

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

  7. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  8. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  9. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

随机推荐

  1. Truncated incorrect DOUBLE value: 'd'的解决方法（jdbc）

    今天写jdbc中dao的增删改查时遇到了一个问题,花费了好长时间,不过还好,有我峰哥出头,问题解决了,在这做个分享,对峰哥表达一下感激之情 网上搜索到的对“Truncated incorrect DO ...

  2. Java数据结构和算法 - TreeMap源码理解红黑树

    前言 本篇将结合JDK1.6的TreeMap源码,来一起探索红-黑树的奥秘.红黑树是解决二叉搜索树的非平衡问题. 当插入(或者删除)一个新节点时,为了使树保持平衡,必须遵循一定的规则,这个规则就是红- ...

  3. Data - Tools

    数据工具汇总 史上最全的大数据分析和制作工具 全球100款大数据工具汇总 SQL 数据分析常用语句 01 - NumPy HomePage:http://www.numpy.org/ NumPy(数值 ...

  4. 北上广等一线城市IT岗位已接近饱和？

    IT行业的技术者,时常被我们戏称为「IT民工」,虽然行业内巨大的人才需求和相对容易得到的高薪在源源不断的吸引各路人马加入,但它依旧在全球最缺人的十大行业中位居榜首. 我身边的朋友大都问过我这样一个疑问 ...

  5. eclipse连接Android8.0以上手机无法打印日志的问题

    概述 我的eclipse的环境: Eclipse:Eclipse IDE for Java DevelopersVersion: Luna Service Release 2 (4.4.2) Andr ...

  6. 如何发起、防御和测试XSS攻击，我们用DVWA来学习（下）

    上一篇我们了解了XSS攻击的原理,并且利用DVWA尝试了简单的XSS攻击,这一篇我们来实现更复杂的攻击,然后探讨防御机制和测试理念. 前面我们通过脚本注入让网页弹出了用户cookie信息,可以光弹窗是 ...

  7. windows下安装bpython方法 （新）

    刚开始学习python的时候使用的ipython解释器,挺好用的,后来发现bpython功能更强大,linux系统中安装基本没啥问题,不过在windows下安装倒是不容易啊.使用google搜了一下, ...

  8. 基于 Nginx 的 HTTPS 性能优化实践

    前言 分享一个卓见云的较多客户遇到HTTPS优化案例. 随着相关浏览器对HTTP协议的“不安全”.红色页面警告等严格措施的出台,以及向 iOS 应用的 ATS 要求和微信.支付宝小程序强制 HTTPS ...

  9. Docker Compose 简介

    Compose 是 docker 提供的一个命令行工具,用来定义和运行由多个容器组成的应用.使用 compose,我们可以通过 YAML 文件声明式的定义应用程序的各个服务,并由单个命令完成应用的创建 ...

  10. JDBC与ORM发展与联系 JDBC简介（九）

    概念回顾 回顾下JDBC的概念: JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它 ...