AngularJS学习笔记(三)数据双向绑定的简单实例


Posted in Javascript onNovember 08, 2016

双向绑定

双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听、数据同步上,关于双向更新,可看下图:AngularJS学习笔记(三)数据双向绑定的简单实例

数据-->视图

这里我们只演示有了数据以后,如何绑定到视图上。

<!DOCTYPE html>

<html ng-app="App">
<head>
  <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
  <script type="text/javascript">

  var App = angular.module("App", []);

  App.controller("ctrl", function ($scope) {
      
       $scope.username='张三'
      
        $scope.changename=function(){
          $scope.username='李四';  
        }
    });
    
  </script>
</head>
  <body>
    <div ng-controller ="ctrl">
      <button class='btn btn-primary' ng-click='changename();'>
        username='李四'
      </button>
      <!--页面加载初期,用户可能会看到绑定的表达式-->
      <div>{{username}}</div>
      <!--此绑定不会出现上述情况-->
      <div ng-bind='username'></div>
    </div>
  </body>
</html>

点击按钮之后,div内容变成 李四,效果如图:
AngularJS学习笔记(三)数据双向绑定的简单实例

视图—>数据

上个例子,我们看了数据变化后,视图也会自动变化。那么这个例子则是反过来,视图变化,导致数据也跟着变化,那么数据变化后,我们如何知道呢,这儿我们可以通过另外一个元素将数据再显示出来。

<!DOCTYPE html>

<html ng-app="App">
<head>
  <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
  <script type="text/javascript">

  var App = angular.module("App", []);

  App.controller("ctrl", function ($scope) {
      
       $scope.username='张三'
    });
    
  </script>
</head>
  <body>
    <div ng-controller ="ctrl">
      <input type='text' ng-model='username' />
      
      <div>{{username}}</div>
    </div>
  </body>
</html>

查看效果:
AngularJS学习笔记(三)数据双向绑定的简单实例

实现机制

angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。

在digest流程里面, 会从rootscope开始遍历, 检查所有的watcher。

Javascript 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 #Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 #Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 #Javascript
AngularJS压缩JS技巧分析
Nov 08 #Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 #Javascript
bootstrap fileinput完整实例分享
Nov 08 #Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 #Javascript
You might like
php去除字符串换行符示例分享
2014/02/13 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
同学会邀请书大全
2014/01/12 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
教师先进事迹材料
2014/12/16 职场文书
保送生自荐信
2015/03/06 职场文书
会计出纳岗位职责
2015/03/31 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android