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 ...
随机推荐
- SpringMVC3.2+JPA使用注解的方式环境搭建
==============================entity=========================================================package ...
- oracle客户端安装及Plsql devloper连接
1)安装Oracle 11g 64位 2)安装32位的Oracle客户端( instantclient-basic-win32-11.2.0.1.0)下载instantclient-basic-win ...
- java(2014版)连接数据库的工具类
package util; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; ...
- php涉及数据库操作时响应很慢。
症状描述: 网站是php开发的,大部分页面响应很慢. 本地开发时响应速度很快,但是部署到生产环境后大部分响应很慢. 通过谷歌浏览调试发现PHP页面加载很慢,有个别的php请求的响应时间甚至超过10秒, ...
- php 内置http服务器
PHP从5.4.0起,内置了一个http服务器,开发人员可以借助这个内置服务器来做一些本地测试. 启动服务器: 打开终端,进入php安装目录,然后执行 php -S localhost: 这样就可以开 ...
- Oracle 建表常用数据类型的详解
创建表时,必须为表的各个列指定数据类型.如果实际的数据与该列的数据类型不相匹配,则数据库会拒绝保存.如为学生指定出生日期为“1980-13-31”. 在Oracle中,常见的数据类型有: 字符串:字符 ...
- javascrip keyCode属性备案
keycode 8 = BackSpace BackSpacekeycode 9 = Tab Tabkeycode 12 = Clearkeycode 13 = Enterkeyc ...
- xiaoxia的vim配置
这样已经很强大了 set nu sts=4 ts=4 sw=4 et si ai set ruler set hlsearch syntax on filetype plugin on
- Could not load the assembly 'App_Web_cwclgcuu'. Make sure that it is compiled before accessing the page.
将网站迁移到windows server 2012 R2(64 bit), IIS 6.2(build 9200)上,爆出这个错误. 解决:右键相应的application pool,选择“Set A ...
- 惊叹jQuery(解决jQuery对象到DOM的转换)
jQuery是一个javascript框架,但绝对不是通常意义上的一些包装,个人感觉是一个改变js控制方式的框架.我们可以像美工通过写css分离页面代码一样,通过jQuery来分离页面与效果..下面转 ...