ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

  • 为应用程序数据提供类型验证（number、email、required）。
  • 为应用程序数据提供状态（invalid、dirty、touched、error）。
  • 为 HTML 元素提供 CSS 类。
  • 绑定 HTML 元素到 HTML 表单。

双向绑定

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

名字: <input ng-model="name">

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

</div>

验证用户输入

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

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

属性

描述

$dirty

表单有填写记录

$valid

字段内容合法的

$invalid

字段内容是非法的

$pristine

表单没有填写记录

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>

ng-model 指令根据表单域的状态添加/移除以下类：

    • ng-empty
    • ng-not-empty
    • ng-touched
    • ng-untouched
    • ng-valid
    • ng-invalid
    • ng-dirty
    • ng-pending
    • ng-pristine

ng-model 指令的更多相关文章

  1. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  2. Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

    ng-app   定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...

  3. ng 指令的自定义、使用

    1.创建和使用var app = angular.module('myApp',['ng']);app.directive('指令名称',func); 自定义指令的命名:驼峰式,有两部分构成,前缀一般 ...

  4. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  5. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  6. ASP.NET Core 中文文档 第二章 指南（4.4）添加 Model

    原文:Adding a model 作者:Rick Anderson 翻译:娄宇(Lyrics) 校对:许登洋(Seay).孟帅洋(书缘).姚阿勇(Mr.Yao).夏申斌 在这一节里,你将添加一些类来 ...

  7. AngularJs的UI组件ui-Bootstrap分享（十）——Model

    Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...

  8. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  9. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

  10. ASP.NET MVC 学习3、Controller左手从Model获取数据，右手传递到View页面

    参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/accessing-your-models-dat ...

随机推荐

  1. hdoj 5288 OO’s Sequence

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5288 //*************头文件区************* #include<ios ...

  2. sql GROUP BY 分组统计

    语句1: SELECT TypeID, COUNT(*) AS [count] FROM GoodsInfo  GROUP BY TypeID 得到结果 解析结果:GoodsInfo表有 4条记录, ...

  3. 用CSS让字体在一行内显示不换行（收藏）

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  4. libcurl API：CURLOPT_REFERER的用法

    1.当你用libcurlAPI来请求某些数据时,发现返回的数据是0,这时候你就要去尝试用CURLOPT_REFERER来伪造一个来路页面:具体设置什么值可以通过浏览器来获取:按f12,在network ...

  5. 编写你自己的单点登录（SSO）服务

    王昱 yuwang881@gmail.com   博客地址http://yuwang881.blog.sohu.com 摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统其中.本文从 ...

  6. GEOS库 介绍 （转）

    http://wiki.woodpecker.org.cn/moin/lilin/geos-introduce 介绍 GEOS是一个集合形状的拓扑关系操作实用库(可能这么说不太准确),简单得说,就是判 ...

  7. C++ Code_StatusBar

    主题 1. 创建状态栏 并显示 2. 在状态栏中显示进度条 3. MDI文档显示和隐藏状态栏 4. 5.     代码::创建状态栏 并显示 //手动添加3个ICON //////////////// ...

  8. java list三种遍历方法性能比較

    从c/c++语言转向java开发,学习java语言list遍历的三种方法,顺便測试各种遍历方法的性能,測试方法为在ArrayList中插入1千万条记录,然后遍历ArrayList,发现了一个奇怪的现象 ...

  9. change netbeans look and feel

    change netbeans look and feel: 方法一: 下载地址:https://kenai.com/projects/nbsubstance/downloads/directory/ ...

  10. qt的安装和debug

    qt-opensource-windows-x86-msvc2013_64_opengl-5.3.0            这个已经包含了qt-creator-opensource-windows-x ...