参考：

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. LINUX文件格式化读写(文件指针,缓冲)

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  2. 201621123010《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...

  3. （翻译）Angular 1.3中的验证器管道

    原文地址:VALIDATORS PIPELINE IN ANGULAR 1.3 我们知道在Angular中操作表单是很爽的.因为Angular本身的作用域模型,我们总能在相应的作用域中获取到表单当前的 ...

  4. <xsd:import>

    最近研究wsdl文件发现在生成客户端代码时报错了, WSDLException (at /wsdl:definitions/wsdl:types/xsd:schema): faultCode=OTHE ...

  5. P1002 谁拿了最多奖学金

    P1002 谁拿了最多奖学金 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2005复赛提高组第一题 描述 某校的惯例是在每学期的期末考试之后发放奖 ...

  6. HDU 3998

    http://acm.hdu.edu.cn/showproblem.php?pid=3998 求LIS的长度,并且求有多少组互不相交的LIS 求组数用最大流 建图如下: if(dp[i]==1)add ...

  7. Spring MVC - 拦截器实现 和 用户登陆例子

    1.拦截器 SpringMvc中的拦截器实现了HandlerInterceptor接口,通常使用与身份认证,授权和校验,模板视图,统一处理等: public class HanderIntercept ...

  8. Windows下C++删除清除map

    清除单map(非嵌套map) #include<map> #include<string> #include<iostream> using namespace s ...

  9. 2N7002

    就相当于一个开关,当G>S的一定电压就导通,若没有达到就没有导通. 并且注意的是D脚不能直接接电压,中间要接一个电阻. 这用是G输入,S接地,D输出. 跟三极管差不多.分N和P

  10. hihocoder1545 : 小Hi和小Ho的对弈游戏（树上博弈&nim博弈）

    描述 小Hi和小Ho经常一起结对编程,他们通过各种对弈游戏决定谁担任Driver谁担任Observer. 今天他们的对弈是在一棵有根树 T 上进行的.小Hi和小Ho轮流进行删除操作,其中小Hi先手. ...