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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
javascript Excel操作知识点
Apr 24 Javascript
javascript中的delete使用详解
Apr 11 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
H5上传本地图片并预览功能
May 08 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 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正则表达式基本应用
2011/07/14 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php动态绑定变量的用法
2015/06/16 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
动态表格Table类的实现
2009/08/26 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python tkinter窗口最大化的实现
2019/07/15 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
如何强制垃圾回收
2015/10/06 面试题
优秀民警事迹材料
2014/01/29 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
遗嘱格式范本
2015/08/07 职场文书
怎么用Python识别手势数字
2021/06/07 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Ajax实现三级联动效果
2021/10/05 Javascript