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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
jQuery文字轮播特效
Feb 12 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 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
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python监控进程脚本
2018/04/12 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
python 贪心算法的实现
2020/09/18 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
彪马法国官网:PUMA法国
2019/12/15 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
商场营业员岗位职责
2015/04/14 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技