栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

AngularJS 模型详细介绍及实例代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AngularJS 模型详细介绍及实例代码

AngularJS ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

AngularJS 实例





 




名字: 




使用 ng-model 指令来绑定输入域的值到控制器的属性。

运行结果:

名字: 

使用 ng-model 指令来绑定输入域的值到控制器的属性。

双向绑定

双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改:

AngularJS 实例





 




名字: 
你输入了: {{name}}




修改输入框的值,标题的名字也会相应修改。

运行结果:

名字: 

你输入了: John Doe

修改输入框的值,标题的名字也会相应修改。

验证用户输入

AngularJS 实例





 





在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。

运行结果:

Email: 

在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。

 CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:

AngularJS 实例





 

input.ng-invalid {
  background-color: lightblue;
}






编辑文本域,不同状态背景颜色会发送变化。

文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。

 运行结果:

编辑文本域,不同状态背景颜色会发送变化。

文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。

ng-model 指令根据表单域的状态添加/移除以下类:

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/95370.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号