参考：

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. PHP:第三章——PHP中的递归函数

    <?php header("Content-Type:text/html;charset=utf-8"); function A(){ static $i = 0; ++$i ...

  2. prayer OJ M

    这一题是一把辛酸泪啊...一个半小时ac的... 首先,考虑到如果要一条路径最小,那么肯定是没有值大于等于3的 显然如果有一个大于等于3的,那么这个数把路径分成两份,一份有k个,一个n-k-1个 那么 ...

  3. Linux 查看服务器硬件信息

    目录 CPU CPU 总核数 = 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 查看路数/Socket(s) cat /proc ...

  4. 2.2 C++类的成员变量和成员函数

    参考:http://www.weixueyuan.net/view/6334.html 总结: 类成员的声明和定义: 类成员函数的定义分类内定义(内联)和类外定义(可用 inline 关键字 强制转换 ...

  5. MyEclipse移动开发教程：设置所需配置的iOS应用（二）

    MyEclipse个人授权 折扣低至冰点!立即开抢>> [MyEclipse最新版下载] 二.创建一个数字证书和私钥 2.2 生成证书签名请求和私钥文件 第一步是使用数字签名实用程序创建证 ...

  6. SharePoint 2013的100个新功能之内容管理（一）

    一:拖拽 现在在任意的文档库中,你可以拖拽文档到文档库区域,它会以进度条显示上传到文档库中.第一步鼠标点击文档拖动到文档库区域时,它会变成"拖到此处",第二步放开鼠标,上传. 二: ...

  7. linux 简单常用命令

    kill -3 pid就是发送信号3也就是SIGQUIT给进程pid.kill -9 就是发信号9也就是SIGKILL. pwd: 打印当前工作目录ls:默认显示当前工作目录内容cd:改变当前工作目录 ...

  8. 一个TED演讲背后的文化论

    0. 前言 写这个前言让我很难受,当然不是心情难受哈,此时的状态是很High的哦,大中午觉都省了, 说难受是我觉得我这语言文字太渣了,相比今天的主题确实很没“文化”.但我也很庆幸,能 看到这么个人认为 ...

  9. 深入理解uwsgi和gunicorn网络模型

    前言: 去年10月份建了一个python技术群,到现在为止人数已经涨到700人了.最一开始我经常在群里回应大家的问题,不管是简单还是困难的,我都会根据自己的经验来交流. 让人新奇的是一些初学者关注最多 ...

  10. encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别

    一.这四个方法的用处 1.用来编码和解码URI的 统一资源标识符,或叫做 URI,是用来标识互联网上的资源(例如,网页或文件)和怎样访问这些资源的传输协议(例如,HTTP 或 FTP)的字符串.除了e ...