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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
Date对象格式化函数代码
Jul 17 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
7个jQuery最佳实践
Jan 12 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
详解vue-router传参的两种方式
Sep 10 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
js实现窗口全屏示例详解
Sep 17 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
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
PHP7 list() 函数修改
2021/03/09 PHP
文本加密解密
2006/06/23 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python 的列表遍历删除实现代码
2020/04/12 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python元字符的用法实例解析
2018/01/17 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
python实现简单文件读写函数
2021/02/25 Python
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
医学生自荐信
2013/12/03 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
服务理念口号
2014/06/11 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA