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 function调用时的参数检测常用办法
Feb 26 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
Date对象格式化函数代码
Jul 17 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
理解javascript中的with关键字
Feb 15 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
vuex存储token示例
Nov 11 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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 Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP四大安全策略
2014/03/12 PHP
php中spl_autoload详解
2014/10/17 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
铁路工务反思材料
2014/02/07 职场文书
总账会计岗位职责
2014/03/13 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年技术员工作总结
2015/04/10 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
详细了解MVC+proxy
2021/07/09 Java/Android