相思资源网 Design By www.200059.com

AngularJS ng-model 指令

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

ng-model 指令

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

运行结果:

名字: 

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

双向绑定

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

运行结果:

名字: 

你输入了: John Doe

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

验证用户输入

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

运行结果:

Email: 

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

 CSS 类

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

 运行结果:

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

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

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

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

标签:
AngularJS,模型实例代码,AngularJS,模型详解,AngularJS模型

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“AngularJS 模型详细介绍及实例代码”

暂无AngularJS 模型详细介绍及实例代码的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。