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. Java 生成 JNI 头文件

    [参考文章]:javah javac 命令行生成native的方法教程 [参考文章]:用javah 导出类的头文件, 常见的错误及正确的使用方法 项目需要调用 C++动态库,由于项目包结构发生变化,需 ...

  2. Python档案袋（列表、元组、字典、集合 )

    列表 可以同名,有序(通过下标可找到) 取值: 1 #声明列表 2 listx=["L0","L1","L2",33,"L4&qu ...

  3. IDEA激活码（2019）

    如您激活出现问题,请点击这里加入:软件激活问题解决群 前言 IDEA已然成为我最热爱的一款编辑器,作为一个从Eclipse阵营转过来的coder,确实能感受到IDEA的强大,而我电脑桌面的Eclips ...

  4. Python内置函数(54)——reversed

    英文文档: reversed(seq) Return a reverse iterator. seq must be an object which has a __reversed__() meth ...

  5. Python内置函数(19)——eval

    英文文档: eval(expression, globals=None, locals=None) The arguments are a string and optional globals an ...

  6. 今天俺要说一说工厂方法模式(Factory)

    前言;工厂方法模式又叫做工厂模式,它是23个设计模式中的一个,它解决的还是在软件设计中创建对象的问题,它可以更好的解决用户需求的变化. 问题;在简单工厂模式中,我们将实例化的对象全部放于Factory ...

  7. 『2019/3/19 USACO测试 反思与总结』

    2019/3/8 USACO测试 这是第三次考试了,不过这一次没有上一次考得好,也算是比较失误的,有一道题思路对但是写挂了. 还是看一下试题安排: 题号 试题分组 考察算法 思维难度 代码难度 1 银 ...

  8. Java的类加载器种类（双亲委派）

    Java类加载器采用双亲委派模型: 1.启动类加载器:这个类加载器负责放在<JAVA_HOME>\lib目录中的,或者被-Xbootclasspath参数所指定的路径中的,并且是虚拟机识别 ...

  9. flag.xls

    Topic Link http://ctf5.shiyanbar.com/misc/flag.xls 1)  打开表格发现需要密码 但是flag又在表里,但我们可以改他的格式为.txt文本,因为这样就 ...

  10. xshell连接虚拟机详解--技术流ken

    xshell连接虚拟机 第一步:网络模式更改为桥接模式 第二步:重启网络 [root@ken1 ~]# systemctl restart network 第三步:获取IP地址 输入命令ip a 第四 ...