ng-model的用法
参考:
http://www.cnblogs.com/guanglin/p/5200097.html
http://www.runoob.com/angularjs/ng-ng-cloak.html
ng-model、ng-bind、{{}}
==》
ng-model,一般用于输入标签,实现数据的双向绑定;
ng-bind、{{}}有异曲同工之妙,均可用于实现数据的展示;ng-bind一般建议在初始化UI中使用,而{{}}一般建议用于非Index页面;
(使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题).
原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容.
所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容.
注意:
解决F5刷新——Angular打开页面显示表达式
==》方式一:使用ng-bind代替表达式
==》方式二:使用ng-cloak,例如:<p ng-cloak>{{ 5 + 5 }}</p>
ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
AngularJS 应用在加载时,文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果, ng-cloak 指令是为了防止该问题的发生。
语法:
所有 HTML 元素都支持。
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
- 为应用程序数据提供类型验证(number、email、required)。
- 为应用程序数据提供状态(invalid、dirty、touched、error)。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
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):
<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 {
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
最新文章
- 【Postgresql】数据库函数
- kali更新源
- 爱上WPF,努力才会有希望!
- 绘制图形与3D增强技巧(五)----多边形图元的使用及其他
- ELK——Logstash 2.2 mutate 插件【翻译+实践】
- puma vs passenger vs rainbows! vs unicorn vs thin 适用场景 及 performance
- ASP.NET MVC4学习笔记路由系统实现
- dll的加载方式主要分为两大类,显式和隐式链接
- 几款屏幕录制软件 ActivePresente
- 汉字Collection
- HDFS追本溯源:HDFS操作的逻辑流程与源码解析
- ospf的虚连接配置
- multiMap遍历方法
- 视觉惯性里程计Visual&ndash;Inertial Odometry(VIO)概述
- conductor 系统任务
- hdoj1435 Stable Match(稳定婚姻问题)
- 解决SurfaceView调用setZOrderOnTop(true)遮挡其他控件
- 多角度看.NET面试题
- C++ string功能补充(类型互转,分割,合并,瘦身)
- elk系列3之通过json格式采集Nginx日志【转】