参考：

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

验证用户输入

<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

ng-model的用法的更多相关文章

  1. Django框架学习-Model进阶用法

    Model进阶用法 回顾 访问外键 访问多对多关系 更改数据库结构 当处理数据库结构改变时,需要注意到几点: 增加字段 首先在开发环境中: 再到产品环境中: 删除字段 删除多对多字段 删除model ...

  2. CRM product model的用法

    User scenario An example from sap help For a car, the interior, the engine capacity, and the exterio ...

  3. bootstrap-vue 中 model 基础用法

    Model 官方文档:  https://bootstrap-vue.js.org/docs/components/modal <b-modal v-model="labelModal ...

  4. sys model 常见用法

    import sys #与python解释器 交互 print(sys.argv) #是一个列表 解释器执行文件名后面可以增加字符串 以列表元素形式添加进去def foo(): print('ok') ...

  5. mongoosejs model mapping to collection name

    mongoosejs 是一个对象模型工具,将mongodb的collection中的Document映射为Model 典型用法如下 var mongoose = require('mongoose') ...

  6. python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能）， 模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法

    python_way day18 html-day4 1.Django-路由系统   - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...

  7. Spring中Model,ModelMap以及ModelAndView之间的区别

    原文链接:http://blog.csdn.net/zhangxing52077/article/details/75193948 Spring中Model,ModelMap以及ModelAndVie ...

  8. MVC之ViewData.Model

    在MVC中前台Razor视图呈现数据的方式不止一种.举个简单的Demo,我们要把用户信息呈现给人民. 一.ViewData.Model的使用,先简单写一下Razor @model   User---- ...

  9. MVC中Model和model的区别和用户

    MVC中Model和model的区别,它们应该怎么用呢? 使用@model关键字可以定义一个Action里所对应的一个模型(经常可以叫他实体类). MVC的第一个字母M是Model,承载着View层和 ...

  10. Go语言根据数据表自动生成model以及controller代码

    手写model的用法请参考: https://www.jianshu.com/p/f5784b8c00d0 这里仅说明自动生成model文件的过程 bee generate appcode -tabl ...

随机推荐

  1. hdu3613

    题解: EX_KMP 网上似乎说kmp也可以,但是我交了一发代码没过 然后标记一下哪一些前缀和后缀会问 暴力枚举拆开了的位置 代码: #include<cstdio> #include&l ...

  2. Microsoft 数据访问组件 (MDAC) 的版本历史记录

    http://support.microsoft.com/kb/231943/zh-cn http://support.microsoft.com/kb/301202

  3. Shiro 学习资料

    参考链接:http://jinnianshilongnian.iteye.com/blog/2018398

  4. 缓存ehcache

    应用场景: 当调用一个接口数据时:直连-缓存-数据库-远程调用(类似直连) 代码: // 从缓存 通过身份证号码查询是否存在征信报告 CisReportRoot fromCache = cacheSe ...

  5. avalonJS-源码阅读（3） VMODEL

    来源 avalon的重头戏.终于要到我最期待的vmodel了. ps:这篇博文想做的全一点,错误少一点,所以会有后续的更新在这篇文章中. 状态:一稿 目录[-] avalon dom小结 数据结构 观 ...

  6. Android开发入门要点记录：四大组件

    cocos2dx跨平台开发中需要了解android开发,昨天快速的浏览了一本Android开发入门教程,因为之前也似懂非懂的写过Activity,Intent,XML文件,还有里面许多控件甚至编程思想 ...

  7. jquery日期和时间的插件精确到秒

    首先.html5提供了input的time类型,使我们可以通过input框输入日期,但是如果我们的需求是这个时间需要明确到几时几分几秒的,那html5就没有办法满足我们的需求了,就需要使用jQuery ...

  8. Oracle Tuning (Oracle 性能调整)的一些总结

    Oracle Tuning (Oracle 性能调整)的一些总结 Oracle Tuning (Oracle 性能调整)的一些总结关于Oracle的性能调整,一般包括两个方面,一是指Oracle数据库 ...

  9. OpenCV代码提取：遍历指定目录下指定文件的实现

    前言 OpenCV 3.1之前的版本,在contrib目录下有提供遍历文件的函数,用起来比较方便.但是在最新的OpenCV 3.1版本给去除掉了.为了以后使用方便,这里将OpenCV 2.4.9中相关 ...

  10. Maven项目中的配置

    1 在配置好Maven项目后,新建一个Maven Project.如图 点击next,会进入如下界面: 选择webapp,不选择默认的quickstart,之后会进入以下界面 填好Group ID 和 ...