参考：

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. Win10 dell驱动触摸板安装

    Win10 dell驱动触摸板安装 在此之前安装驱动后要重启

  2. INTEL NUC下一代计算机 怎么进bios，进不去bios

    手上有个 英特尔® NUC 套件 DE3815TYKHE 玩具一样,200大洋收来的,配置不高,配了个4G内存,加上以前的2.5笔记本硬盘. 放家里当个小服务器玩吧,挺省电的. BIOS 开启fast ...

  3. java 继承 初始化顺序

    面向对象三大特性: 封装,继承,多态 java 继承初始化顺序 先初始化父类对象, 在父类对象中先初始化父类属性,再初始化父类的构造方法,然后初始化子类对象,初始化子类对象的属性,初始化子类的构造方法 ...

  4. 构建你自己的论坛，基于windows服务器的xampp+discuz论坛

    首先声明,论坛的构建需要基于企业,并且基于企业注册,然后进行域名备案. 此处作为研究,先示例: 1. 安装 xampp 软件,百度搜索 然后在服务器安装,基本都是默认安装,然后出来. 安装完成后,接下 ...

  5. Ubuntu 16.04 LTS安装 cuda8.0

    参考文献: http://blog.csdn.net/autocyz/article/details/52299889 http://blog.csdn.net/lixintong1992/artic ...

  6. python可视化爬虫实现“京东试用”批量申请

    介绍: 环境:chromedriver 2.41.578700+ selenuim3.14.0 过程: 1.打开京东主页 2.登录京东 3.打开京东试用页面 4.获取商品列表 5.自动申请试用(该商品 ...

  7. TJU Problem 1065 Factorial

    注意数据范围,十位数以上就可以考虑long long 了,断点调试也十分重要. 原题: 1065.   Factorial Time Limit: 1.0 Seconds   Memory Limit ...

  8. android中的5大布局

    1.线性布局:LinearLayout layout_margin     上下左右的距离分别为 下面图中的orientation表示的是布局中的方向 分别有horizontal表示水平 vertic ...

  9. ULINK2配置

    先要安装ULINK2的驱动 如果还没有检测到驱动的话,下个驱动人生,应该就行了.反正我就是这样弄成的^-^. 然后就是配置了 这样就可以下载了.

  10. 我的第一个Mybatis程序

    第一个Mybatis程序 在JDBC小结中(可以参阅本人JDBC系列文章),介绍到了ORM,其中Mybatis就是一个不错的ORM框架 MyBatis由iBatis演化而来 iBATIS一词来源于“i ...