博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ng-model的用法
阅读量:5225 次
发布时间:2019-06-14

本文共 1861 字,大约阅读时间需要 6 分钟。

参考:

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,例如:<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

 

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

你可能感兴趣的文章
centos7升级firefox的flash插件
查看>>
Apache Common-IO 使用
查看>>
再谈Vmware NAT的配置和路由流程
查看>>
javaScript数组去重方法汇总
查看>>
评价意见整合
查看>>
二、create-react-app自定义配置
查看>>
Android PullToRefreshExpandableListView的点击事件
查看>>
系统的横向结构(AOP)
查看>>
linux常用命令
查看>>
NHibernate.3.0.Cookbook第四章第6节的翻译
查看>>
例1-1
查看>>
马达调速器,直流马达调速器,直流调速器
查看>>
前端编码规范小记
查看>>
c如何弹出保存路径/保存文件对话框
查看>>
HTML标签二
查看>>
Python 3语法小记(九) 异常 Exception
查看>>
使用shared memory 计算矩阵乘法 (其实并没有加速多少)
查看>>
Django 相关
查看>>
git init
查看>>
训练记录
查看>>