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


Posted in Javascript onJuly 27, 2016

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="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

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

</body>
</html>

运行结果:

名字: 

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

双向绑定

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

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

</body>
</html>

运行结果:

名字: 

你输入了: John Doe

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

验证用户输入

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm">
  Email:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

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

</body>
</html>

运行结果:

Email: 

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

 CSS 类

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<style>
input.ng-invalid {
  background-color: lightblue;
}
</style>
</head>
<body>

<form ng-app="" name="myForm">
  输入你的名字:
  <input name="myName" ng-model="myText" required>
</form>

<p>编辑文本域,不同状态背景颜色会发送变化。</p>
<p>文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。</p>

</body>
</html>

 运行结果:

输入你的名字: 

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

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

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

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

Javascript 相关文章推荐
JS上传前预览图片实例
Mar 25 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
详解Angular开发中的登陆与身份验证
Jul 27 #Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 #Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 #Javascript
AngularJS 指令详细介绍
Jul 27 #Javascript
js中遍历Map对象的方法
Jul 27 #Javascript
angular.js分页代码的实例
Jul 27 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
一分钟理解js闭包
2016/05/04 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
国际商贸专业自荐信
2014/06/09 职场文书
尊师重教演讲稿
2014/09/04 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
五年级作文之想象作文
2019/10/30 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
python状态机transitions库详解
2021/06/02 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
Windows server 2012搭建FTP服务器
2022/04/29 Servers