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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
Javascript 实用小技巧
Apr 07 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python常用算法学习基础教程
2017/04/13 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
python 绘制国旗的示例
2020/09/27 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
个人作风建设总结
2014/10/23 职场文书
优秀班集体申报材料
2014/12/25 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技