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 相关文章推荐
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
各种快递查询--Api接口
2016/04/26 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP 无限级分类
2017/05/04 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
JS的反射问题
2010/04/07 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
详解webpack babel的配置
2018/01/09 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
学校后勤人员职责
2013/12/27 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python