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 相关文章推荐
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
详解node.js 事件循环
Jul 22 Javascript
小程序中手机号识别的示例
Dec 14 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
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
python爬虫常用的模块分析
2014/08/29 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
数字化校园建设方案
2014/05/03 职场文书
政风行风建设整改方案
2014/10/27 职场文书
行为规范主题班会
2015/08/13 职场文书