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. Python基础语法（三）

    Python基础语法(三) 1. 数值型数据结构 1.1 要点 在之前的博客也有提到,数值型数据结构在这里就不过多介绍了.在这里提及一些需要知道的知识点. int.float.complex.bool ...

  2. 微信公众号的开发 Senparc.Weixin.dll使用

    项目需要,做个微信公众号,之前从未做过,前期挺懵的,再次记录一下,一切困难都是纸老虎(哈哈) 服务号是公司申请的微信公共账号,订阅号是个人申请的.建议开发者自己申请一个测试账号,方便使用,但是测试账号 ...

  3. Linux 文件夹压缩命令总结

    tar命令 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName gz命令 解压1:gunzip FileName.gz 解压2:gzip ...

  4. 【Redis篇】Redis集群安装与初始

    一.前述   本文将单台节点不同端口模拟集群方式. 二.具体搭建 前提是安装好redis具体可参考http://www.cnblogs.com/LHWorldBlog/p/8463269.html 1 ...

  5. Python Matplotlib.pyplot plt 中文显示

    话不多说,上代码 # -*- coding: UTF-8 -*- import matplotlib.pyplot as plt from matplotlib.font_manager import ...

  6. 深入理解OkHttp源码（三）——网络操作

    这篇博客侧重于了解OkHttp的网络部分,包括Socket的创建.连接,连接池等要点.OkHttp对Socket的流操作使用了Okio进行了封装,本篇博客不做介绍,想了解的朋友可以参考拆轮子系列:拆O ...

  7. nginx系列 2 概述

    一. nginx功能概述 nginx 提供的基本功能服务归纳为:基本HTTP服务.高级HTTTP服务.邮件代理服务.TCP/UDP 代理服务等四大类. (1) Nginx提供基本HTTP服务,可以作为 ...

  8. C# - 2017微软校园招聘笔试题 之 MS Recognition[待解决]

    MS Recognition 在线提交: hihoCoder 1402 http://hihocoder.com/problemset/problem/1402 类似: OpenJudge - I:P ...

  9. 从锅炉工到AI专家(2)

    大数据 上一节说到,大多的AI问题,会有很多个变量,这里深入的解释一下这个问题. 比如说某个网站要做用户行为分析,从而指导网站建设的改进.通常而言如果没有行为分析,并不需要采集用户太多的数据. 比如用 ...

  10. Spring 完美配置跨域请求

    在SpringBoot2.0 上的跨域 用以下代码配置 即可完美解决你的前后端跨域请求问题 import org.springframework.context.annotation.Bean; im ...