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. Android device debug (adb) by Charge Only mode

    Android device debug by Charge Only mode Method 1 Connect devices to computer and execute lsusb Find ...

  2. Spring设计模式_策略模式/其他

    策略模式特性 1.执行最终结果一样 2.执行过程和执行逻辑不一样 3.使用同一接口 达到目的就可以了 Git地址 https://github.com/wujiachengSH/WjcStrategy ...

  3. Python内置函数(56)——set

    英文文档: class set([iterable]) Return a new set object, optionally with elements taken from iterable. s ...

  4. Python使用Xpath轻松爬虫（脑残式）

    1.在PyCharm安装lxml. 2.找到源码 3.F12.copy源码的xpath 4.代码 from lxml import etree import requests wb_data = re ...

  5. SignalR的Javascript客户端API使用方式整合

      PersistentConnection Hub/生成Proxy模式 Hub/非生成Proxy模式 服务端配置 app.Map("/messageConnection", ma ...

  6. C++版- Leetcode 3. Longest Substring Without Repeating Characters解题报告

    Leetcode 3. Longest Substring Without Repeating Characters 提交网址: https://leetcode.com/problems/longe ...

  7. Solr 11 - Solr集群模式的部署(基于Solr 4.10.4搭建SolrCloud)

    目录 1 SolrCloud结构说明 2 环境的安装 2.1 环境说明 2.2 部署并启动ZooKeeper集群 2.3 部署Solr单机服务 2.4 添加Solr的索引库 3 部署Solr集群服务( ...

  8. IntelliJ IDEA上操作GitHub

    IntelliJ IDEA集成了对GitHub的支持,使上传代码到GitHub和从GitHub下载代码更加方便快捷. 一. 分享代码到GitHub 1.首先需要在IntelliJ配置Git,如果没有正 ...

  9. 由Nginx的DNS缓存导致的访问404

    现象 访问某个URL出现404,而且全站都是404.通过日志查看Nginx的规则也正确,请求被代理到指定位置. 排查 最近针对这个站点没有修改过Nginx配置也没有站点升级.所以应该是其他原因.首先P ...

  10. MaxCompute在高德大数据上的应用

    2019年1月18日,由阿里巴巴 MaxCompute开发者社区和阿里云栖社区联合主办的“阿里云栖开发者沙龙大数据技术专场”走近北京联合大学,本次技术沙龙上,高德数据技术专家苗翌辰为大家分享了高德如何 ...