Angular JS - 3 - Angular JS 双向数据绑定

一 、数据绑定

1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从Model流向View   视图(View): 也就是我们的页面(主要是Andular指令和表达式)   模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法   当改变View中的数据, Model对象的对应属性也会随之改变:  ng-model指令  数据从View==>Model   当Model域对象的属性发生改变时, 页面对应数据随之更新:  {{}}表达式  数据从Model==>View   ng-model是双向数据绑定, 而{{}}是单向数据绑定,表达式只能向内存索取数据,它不能改变数据,因此不存在数据从页面流向内存一说3.ng-init  用来初始化当前作用域变量。(单向数据绑定,从页面到angular内存 ,ng-init是定义在body标签中的)
 
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title>02_(双向)数据绑定</title>
 6 </head>
 7 <body ng-app="" ng-init="userName=‘tom‘">
 8
 9 <input type="text" ng-model="userName" />
10 <p>姓名:{{userName}}</p>
11 <input type="text" ng-model="userName"/>
12 <p>姓名:{{userName}}</p>
13
14 <script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
15 </body>
16 </html>

以上代码,定义了2个输入框和两个p标签用来显示内容。先把body 标签中的  ng-app=" "  和 ng-init="userName=‘tom‘" 给去掉,打开页面,发现姓名后面直接显示表达式了, 表达式原样输出说明 js 语法是有问题的,而angularjs也引入了,出现这个问题就是因为,这段语句不在angular的管理区域内、。

     此时,点击打开 ng-inspector 这个插件,什么内容也没有

把ng-app=" " 加上,再打开页面,并打开ng-inspector 插件,发现姓名后面不再原样显示表达式了,同时,插件里面多了一个 $rootScope 根作用域对象 ng-app=" " 这个指令默认会在它的管辖区域内创建一个作用域对象!!    注意,此时点击这个作用域对象前面的箭头,使之变为向下(就是展开里面的内容),发现什么也没有。

代码修改如下:给第一个input标签加上   ng-model="userName" , 表达式里面写上userName,

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title>02_(双向)数据绑定</title>
 6 </head>
 7 <body  ng-app="">
 8
 9 <input type="text" ng-model="userName" />
10 <p>姓名:{{userName}}</p>
11 <input type="text" />
12 <p>姓名:{{}}</p>
13
14 <script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
15 </body>
16 </html>

执行结果如下:此时,第一个input标签和 第一个p标签里面都显示了名字,而ng-inspector 插件中也多了一个userName 属性,其值为tom 这个内存中的 usernName属性 就是  ng-model="userName" 指定的,这个属性的值就是input标签的输入内容,而页面中p标签显示的值是哪里来的呢? 其实也跟 ng-model 有关系,{{}}里面写的就是userName, 其含义就是向作用域内 angular的内存中 userName这个属性要值来显示。

如果第二个input 标签中 是  ng-model="xx" ,即下面这样,

1 <input type="text" ng-model="userName" />
2 <p>姓名:{{userName}}</p>
3 <input type="text" ng-model="xx"/>
4 <p>姓名:{{userName}}</p>

打开页面后在两个输入框分别输入内容,可以看到 第二个input 标签输入内容后, 在插件里面可以看到多了一个 名字是xx的属性,而第二个p 标签显示的值还是 内存中userName 属性的值 。也就说明,ng-model中定义的变量名,会被加到angular的内存中,   表达式中写的遍变量名, angular会去 内存中找 有没有 这个表达式里面写的属性,如果有,把这个属性的值给拿过来显示在页面上,如果没有,不显示。通过ng-model,  数据可以从页面流向 angular内存,也可以从angular内存流向页面。因此ng-model是双向数据绑定, 而{{}}是单向数据绑定,它仅仅是用来显示数据,数据来源于angular 内存

最后, 在body中加上  ng-init = " userName=‘tom‘" 打开后,2个输入框和两个显示区都显示tom ,同时,插件中angular的内存中有一个userName属性,其值为tom ,

说明,页面上输入框中显示的数据是来源于内存中的,只有body里面对userName进行了初始化操作;

现在对第一个输入框的值进行修改,发现其他三个显示值也改变了,angular的内存中的属性值也发生了改变。

原文地址:https://www.cnblogs.com/enjoyjava/p/9180681.html

时间: 2024-12-09 13:21:13

Angular JS - 3 - Angular JS 双向数据绑定的相关文章

要不要使用React JS呢 - Angular与ReactJS的整合

MVC(Model - View - Controller)模式无论是Web开发中的前端还是后端都是比较流行的模式,ReactJS位于前端MVC模式中的View层,最多有点Controller层的特性,相当于Javascript编写的Html模板.而Data Model和Data Binding是Angular的优势,所以需要Angular与ReactJS整合.不过Flux是适应ReactJS的数据绑定需求出现的一个库,支持单向数据绑定,https://facebook.github.io/fl

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

AngularJS 、Backbone.js 和 Ember.js 的比较

1 介绍 我们准备在这篇文章中比较三款流行于Web的“模型-视图-*”框架:AngularJS.Backbone和Ember.为你的项目选择正确的框架能够对你及时交付项目的能力和在以后维护你自己代码的能力产生巨大影响.你也许想基于一款可靠的.稳定的和成熟的框架来构建项目,但又不想为此受到约束.Web发展迅速——新技术产生,旧的那套方法很快跟不上潮流.如此形势之下,我们准备仔细深入的比较这三个框架. 2  框架概览 今天我们提到的所有框架有许多共同点:都是开源的,遵从 MIT 协议,并且都尝试通过

angular.js双向数据绑定实现动画特效

一.HTML 1.引入必要的js文件,这个不多说了(注意由于之后要使用angular提供的动画效果和路由效果,所以要引入angular-animate.js和angular-route.js两个文件) 2.body内加入以下代码:  <div class="page {{pageClass}}" ng-view></div> ng-view不多说,class通过双向绑定的方式,通过controller动态控制class中的{{pageclass}} 另外不要忘了

angularjs学习笔记--主html&amp;template html&amp;module&amp;template js、模块、控制器、双向数据绑定、过滤器

// Register the `phoneList` component on the `phoneList` module, angular. module('phoneList'). component('phoneList', {...}); // Define the `phonecatApp` module angular.module('phonecatApp', [ // ...which depends on the `phoneList` module 'phoneList'

angular和vue双向数据绑定

angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写

Angular之双向数据绑定(下)

本篇详细介绍:1.angular时如何通过脏检查来实现对$scope对象上变量的双向绑定的.2.实现angular双向绑定的三个重要方法:$digest(),$apply(),$watch(). angular不像Ember.js,通过动态设置setter函数和getter函数来实现双向绑定,脏检查允许angular监听可能存在可能不存在的变量. $scope.$watch语法糖:$scope.$watch(watchExp,Listener,objectEquality); 监听一个变量何时变

Angular.JS------认识Angular.JS

之前在C#中也经常使用MVC开发模式,对其的使用有一定的了解,但是现在需要学习AngularJS,这是纯前台的JS代码,那么为什么需要学习这个呢,就是想将验证这里全部在前台执行,不需要在后台代码里面出现验证.项目需要,自己还是得下功夫看下,不要求全部会,简单的使用就OK. AngularJS最适于开发客户端的单页面应用,不是功能库,是用来开发动态网页的框架,专注于扩张HTML的功能,提供动态数据绑定.依赖注入,没想到这里也有这个,之前是在IOC中听到过,自己也研究了下,但是对其理解不是很好,这里

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌