AngularJS  双向数据绑定详解简单实例


Posted in Javascript onOctober 20, 2016

angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图。

下面的demo演示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello, AngularJS!</title>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-app>
    <!-- ng-model指令将表单的value绑定到model的username变量-->
    <input ng-model="username" type="text" placeholder="请输入...">
    <p>Hello, <strong>{{username}}</strong>!</p>
  </div>
</body>
</html>

运行结果:程序运行后,在输入框输入文字,下面会与输入框内容同步变化。是不是很惊奇!以前需要写一大段js代码的事情(监听onchange事件,将input的value赋给下面的strong元素),现在只用一个ng-model指令就完成了。Perferct!

AngularJS  双向数据绑定详解简单实例

案例详解:

1. ng-model指令的作用:建立数据模型,在模型中对应有一个变量username用来存放input元素的value;

2. {{username}}是一个表达式,angular会自动计算该表达式,替换成相应的值。

3. 手动输入文字,input元素的value发生变化,自动同步到model的usename变量,{{username}}是从模型中读username的值,因此下面strong元素的内容跟着变了。

同步数据是angular帮我们完成的。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 #Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 #Javascript
JS调用某段SQL语句的方法
Oct 20 #Javascript
Angularjs 设置全局变量的方法总结
Oct 20 #Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 #Javascript
Angular表单验证实例详解
Oct 20 #Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
一些使用频率比较高的php函数
2008/10/03 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
vue实现评论列表功能
2019/10/25 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python调用java的jar包方法
2018/12/15 Python
Python判断telnet通不通的实例
2019/01/26 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
财务总经理岗位职责
2014/02/16 职场文书
公民代理授权委托书
2014/09/24 职场文书
学生实习证明范文
2014/09/28 职场文书
个人收入证明范本
2015/06/12 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python