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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
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
一个简单计数器的源代码
2006/10/09 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP实现货币换算的方法
2014/11/29 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
actionscript与javascript的区别
2011/05/25 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
C语言笔试集
2012/07/24 面试题
中间件分为哪几类
2012/03/14 面试题
最新计算机专业自荐信
2013/10/16 职场文书
企业员工集体活动方案
2014/08/17 职场文书
好的促销活动方案
2014/08/21 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang