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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js表头排序实现方法
Jan 16 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php防止sql注入的方法详解
2017/02/20 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jQuery后代选择器用法实例
2014/12/23 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python set集合类型操作总结
2014/11/07 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
有关爱国演讲稿
2014/05/07 职场文书
个人借款协议书范本
2014/11/17 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
总经理助理岗位职责
2015/01/31 职场文书
技术员岗位职责
2015/02/04 职场文书
2015年仓库工作总结
2015/04/09 职场文书
python基础之类方法和静态方法
2021/10/24 Python