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 - Python2与Python3的区别、转换与兼容

    区别 Python2.x与Python3.x版本区别:http://www.runoob.com/python/python-2x-3x.html 示例解读Python2和Python3之间的主要差异 ...

  2. Markdown语法简介

    1.标题 在想要设置为标题的文字前面加#来表示一个#代表一级标题,总共六级 2.字体 加粗要加粗的文字左右分别用两个*号包起来 斜体要倾斜的文字左右分别用一个*号包起来 斜体加粗要倾斜和加粗的文字左右 ...

  3. 【Spark篇】--Spark中Standalone的两种提交模式

    一.前述 Spark中Standalone有两种提交模式,一个是Standalone-client模式,一个是Standalone-master模式. 二.具体         1.Standalon ...

  4. 使用Phalcon框架开发一个简易的博客系统

    使用Phalcon PHP框架开发一个简易的博客系统(类似于CMS) 最近在做Phalcon(Phalcon在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚 ...

  5. Unable to build: the file dx.jar was not loaded from the SDK folder

    eclipse 运行 android 时失败了,提示 Unable to build: the file dx.jar was not loaded from the SDK folder! 解决办法 ...

  6. leetcode — construct-binary-tree-from-preorder-and-inorder-traversal

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * * Source : https:/ ...

  7. tcpdump工具使用说明

    tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 注意,tcpdump只能抓取流经本机的数据包,不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将 ...

  8. Select默认选择后台参数

    之前写过一个这样的方法,后来需求开发中,发现了方法的BUG,然后我又重新找了一种方法,今天来记录一下. 先声明前台 <select name="type" class=&qu ...

  9. [Redux] redux之combineReducers

    combineReducers combineReducer 是将众多的 reducer 合成通过键值映射的对象,并且返回一个 combination 函数传入到 createStore 中 合并后的 ...

  10. Using rqt_console and roslaunch

    Description: This tutorial introduces ROS using rqt_console and rqt_logger_level for debugging and r ...