ng-model的用法

最新推荐文章于 2021-05-22 12:05:12 发布

weixin_30722589

最新推荐文章于 2021-05-22 12:05:12 发布

阅读量215

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/YYkun/p/6477616.html

版权

参考：

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 指令是为了防止该问题的发生。

语法：

<element ng-cloak></element>

所有 HTML 元素都支持。

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

ng-model 指令也可以：

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

Eg:==>

验证用户输入

Email:

<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

Email:

</form>

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

<style>

input.ng-invalid {

lightblue;

}

</style>

<body>

输入你的名字:

</form>

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

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

转载于:https://www.cnblogs.com/YYkun/p/6477616.html

weixin_30722589

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng-model的用法

参考：http://www.cnblogs.com/guanglin/p/5200097.htmlhttp://www.runoob.com/angularjs/ng-ng-cloak.htmlng-model、ng-bind、{{}}==》ng-model，一般用于输入标签，实现数据的双向绑定；ng-bind、{{}}有异曲同工之妙，均可用于实现数据的展示；ng-b...
复制链接

扫一扫