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 相关文章推荐
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript的函数
2007/01/31 Javascript
JavaScript 不只是脚本
2007/05/30 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python实现随机漫步功能
2018/07/09 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Django 静态文件配置过程详解
2019/07/23 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
社区敬老月活动实施方案
2014/02/17 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
终止劳动合同协议书
2014/10/05 职场文书
戒赌保证书
2015/05/11 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Oracle 多表查询基本语法实例
2022/04/18 Oracle