ng-model 指令
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 指令的更多相关文章
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...
- ng 指令的自定义、使用
1.创建和使用var app = angular.module('myApp',['ng']);app.directive('指令名称',func); 自定义指令的命名:驼峰式,有两部分构成,前缀一般 ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- AngularJS开发指南11:AngularJS的model,controller,view详解
model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...
- ASP.NET Core 中文文档 第二章 指南(4.4)添加 Model
原文:Adding a model 作者:Rick Anderson 翻译:娄宇(Lyrics) 校对:许登洋(Seay).孟帅洋(书缘).姚阿勇(Mr.Yao).夏申斌 在这一节里,你将添加一些类来 ...
- AngularJs的UI组件ui-Bootstrap分享(十)——Model
Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...
- 走进AngularJs(五)自定义指令----(下)
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
- 走进AngularJs(四)自定义指令----(中)
上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
- ASP.NET MVC 学习3、Controller左手从Model获取数据,右手传递到View页面
参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/accessing-your-models-dat ...
随机推荐
- CentOS7 安装 MySQL 5.7.10
卸载冲突的rpm包:rpm -qa|grep mariadbrpm -e --nodeps mariadb-libs-5.5.41-2.el7_0.x86_64 安装:rmp -ivh mysql-c ...
- 优化checkbox和radio,类似Bootstrap中的iCheck
checkbox和radio浏览器默认的已经满足不了大众的审美需求,更不用说浏览器之间的差异化,取而代之,优化checkbox和radio的方法也随之诞生了. html结构:单选框为例,简单说明: 其 ...
- erlang自定义数据类型
Erlang系统自带的基础数据类型有:atom.tuple.list.binary.pid.float.number.port.reference.record. 用户可以通过通过命令type来自定义 ...
- MongoDB下载与安装
本节只针对MONGODB的安装进行介绍,具体mongodb的特点及优势可参考其他文件. 注意32位操作系统支持的最大文件为2GB,所以做大文件海量储存的朋友要选择64位的系统安装.开始我们的下载安装之 ...
- 2014 年10个最佳的PHP图像操作库--留着有用
Thomas Boutell 以及众多的开发者创造了以GD图形库闻名的一个图形软件库,用于动态的图形计算. GD提供了对于诸如C, Perl, Python, PHP, OCaml等等诸多编程语言的支 ...
- 【剑指offer】递归循环两种方式反转链表
转载请注明出处:http://blog.csdn.net/ns_code/article/details/25737023 本文分别用非递归和递归两种方式实现了链表的反转,在九度OJ上AC. 题目描写 ...
- Linux中断(interrupt)子系统之一:中断系统基本原理 (图解)
http://blog.csdn.net/droidphone/article/details/7445825
- 终端I/O之获得和设置终端属性
使用函数tcgetattr和tcsetattr可以获得或设置termios结构.这样也可以检测和修改各种终端选择标志和特殊字符,以使终端按我们所希望的方式进程操作. #include <term ...
- Linq lamda表达式Single和First方法
让我们来看看如何对一个整数数组使用 Single 操作符.这个整数数组的每个元素代表 2 的 1 到 10 次方.先创建此数组,然后使用 Single 操作符来检索满足 Linq Lambda表达 ...
- 项目源码--Android新闻财经类商用要求源码
技术要点: 1. 商用要求源码框架 2. 登录与注册用户系统模块 3. Android的Http通信以及多线程处理模块 4. Andorid的网络数据处理模块 5. Andorid的版本检测与升级模块 ...