AngularJS入门教程之数据绑定用法示例


Posted in Javascript onNovember 01, 2016

本文实例讲述了AngularJS数据绑定用法。分享给大家供大家参考,具体如下:

数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子:

<!DOCTYPE html>
<html ng-app>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial02</title>
</head>
<body>
<div>
 用户名:<input type="text" ng-model="name" placeholder="用户名"/>
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <p>您输入的用户名:{{name}}</p>
 <p>您输入的密码:{{pword}}</p>
</div>
</body>
</html>

这个例子非常简单,我们先在浏览器中运行一下看看效果。

AngularJS入门教程之数据绑定用法示例

当我们在文本框中输入信息后,我们输入的信息会动态的回显到页面中。

在这个例子中我们使用到了AngularJs的另一个内置指令ng-model,它表示我们在模型数据对象($scope)中添加一个名为”name”的属性,并将它和文本框对象进行绑定。这意味着不管我们在文本框中输入什么,都会同步到这个”name”属性中,AngularJs会监听表单对象相关事件,所以回显内容会随着文本框的输入而改变。

需要注意的是ng-model只能用在表单元素标签中。

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
jQuery动态生成Bootstrap表格
Nov 01 #Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 #Javascript
jQuery双向列表选择器select版
Nov 01 #Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 #Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
Javascript 动态改变imput type属性
Nov 01 #Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 #Javascript
You might like
php目录管理函数小结
2008/09/10 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python是否适合网页编程详解
2019/10/04 Python
pandas分组聚合详解
2020/04/10 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
营业经理岗位职责
2013/11/10 职场文书
小学生打架检讨书
2014/01/26 职场文书
教师专业自荐书范文
2014/02/10 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
安全责任书范本
2014/04/15 职场文书
护校行动方案
2014/05/31 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
python爬取某网站原图作为壁纸
2021/06/02 Python