第三篇，双向的数据绑定

数据绑定是AnguarJS的特性之一，避免书写大量的初始代码从而节约开发时间

数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。

(model是应用中的简单数据，view是AngularJS解析后渲染和绑定后生成的HTML )

传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。

一方面，model变化驱动了DOM中元素变化，

另一方面，DOM元素的变化也会影响到Model。

这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。

这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。

AngularJS的双向数据绑定，意味着你可以在Mode(JS)中改变数据，而这些变动立刻就会自动出现在View上，反之亦然。

即：一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。

这段是网上百度的知识理论，现在，我对于所谓MV的概念并不太清晰，

以下为我结合之前写JS的经验得出的心得：

AngularJS可将一个变量或属性（Model）的值通过{{}}的形式绑定到页面的控件上，

不需要自行写js对DOM进行操作，减少代码量

1、简单绑定（Model更新View）

  1.  <div  ng-app="" >
  2. 				 <div> <label>Name:</label>
  3. 				<input type="text" ng-model="name"  placeholder="请输入姓名" name="">
  4. 				 </div><div>             <label>问候语：</label>
  5. 				  <label>Hello,{{name}}</label>
  6. 				         </div>
  7. 				     </div>

AngularJS

代码效果：

Name:
问候语： Hello,{{name}}

对比：原生js需要对DOM进行操作：

  1.  <body>
  2. 							     <div>
  3. 							         <label>Name:</label>
  4. 							         <input type="text" id="name"  placeholder="请输入姓名" onkeyup ="namechange();" name="">
  5. 							     </div>
  6. 							     <div>
  7. 							         <label>问候语：</label>
  8. 							         <label id="greeting"></label>
  9. 							     </div>
  10. 							 </body>
  11. 							 <script type="text/javascript">
  12. 							     function namechange()
  13. 						     {
  14. 					         var name=document.getElementById('name').value;
  15. 				         document.getElementById('greeting').innerText="Hello,"+name;
  16. 			     }
  17.  
  18. 		 </script>

Js

2、双向绑定（Model更新View，改变View，Model也会自动更新）

  1. <div id="myBind" ng-app="myBind" ng-controller="MyBindctrl">
  2. 			<div>
  3. 			<label>昵称:</label>
  4. 			<select ng-model="selectname" ng-options="x.name for x in nameInfo">
  5. 			</select>
  6. 			<input type="button" value="获取年龄" ng-click="GetAge();">
  7. 			</div>
  8. 			<div>
  9. 			<label>年龄：</label>
  10. 			<label>{{user.agetext}} </label>
  11. 			</div>
  12. 			</div>
  13. 			</body>
  1. <script type="text/javascript">
  2. 				var myModule = angular.module('myBind', []);
  3. 				myModule.controller("MyBindctrl",function($http,$scope){
  4. 				$scope.selectname= '';
  5. 				$scope.nameInfo= [{name:"张立伟",age:20},{name:"闵志涛",age:21},{name:"杨一凡",age:22},{name:"黄征",age:29}];
  6. 				$scope.GetAge=function(){
  7. 			var _bl=false;
  8. 		for(var i=0;i<$scope.nameInfo.length;i++)
  9. 		{
  10. 	if ($scope.nameInfo[i].name ==  $scope.selectname.name) {
  11. 	$scope.user.agetext= $scope.selectname.name+"今年"+$scope.nameInfo[i].age+"岁";
  12. 	_bl=true;
  13. break;
  14. }
  15. }
  16. if (!_bl) {
  17. $scope.user.agetext=  "找不到记录";
  18. }
  19. };
  20. });
  21. <script>

代码效果：

昵称:
年龄： {{agetext}}

【AnjularJS系列3 】 — 数据的双向绑定的更多相关文章

  1. AnjularJS系列3 —— 数据的双向绑定

    第三篇,双向的数据绑定 数据绑定是AnguarJS的特性之一,避免书写大量的初始代码从而节约开发时间 数据绑定指令提供了你的Model投射到view的方法.这些投射可以无缝的,毫不影响的应用到web应 ...

  2. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  3. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  4. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  5. 数据的双向绑定 Angular JS之开端篇

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  6. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  7. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  8. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  9. JavaScript实现数据的双向绑定

    接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...

  10. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

随机推荐

  1. JDK源码中的英文注释翻译（Enum<E extends Enum<E>>）

    public abstract class Enum<E extends Enum<E>> implements Comparable<E>, Serializab ...

  2. Flask框架函数

    title: flask学习笔记 subtitle: 1. flask框架函数 date: 2018-12-14 10:17:28 --- Flask学习 学习Miguel Grinberg的2017 ...

  3. GDI 设备环境句柄（2）

    WM_PAINT 消息的触发 Windows 程序在以下情况会触发WM_PAINT消息: 窗口被移动导致被遮盖部分暴露出来 用户调整窗口的大小(当窗口类的 style 字段被设置为 CS_HREDRA ...

  4. python面向对象的三大特性之一多态

    多态 多态的特性是调用不同的子类将会产生不同的行为,而无需明确知道这个子类实际上是什么 说白了就是,不同的对象调用相同的方法,产生不同的行为 例如:s1是字符串类型,w1是列表,两个完全不同的对象,他 ...

  5. Blender软件导出的obj数据格式文件内容解读

    [cube.obj] # Blender v2.78 (sub 0) OBJ File: '' # www.blender.org mtllib cube.mtl #这里是引用了一个外部材质文件cub ...

  6. redi通过哨兵sentinel实现主从切换

    本次实验主要为了让哨兵监听redis主从复制,当主节点关闭后,哨兵会选举一台从节点成为主节点,并且让其他从节点变成新主节点得从节点 本次理论需要三台机器,一主两从,为了方便用一台服务器开启三个实例,一 ...

  7. 服务器重启后启动Docker命令

    启动步骤: 1.启动Docker 守护进程 systemctl daemon-reload 2.Docker启动命令: systemctl start docker 3.查看docker服务是否启动 ...

  8. MySQL 利用binlog增量备份+还原实例

    一,什么是增量备份 增量备份,就是将新增加的数据进行备份.假如你一个数据库,有10G的数据,每天会增加10M的数据,数据库每天都要备份一次,这么多数据是不是都要备份呢?还是只要备份增加的数据呢,很显然 ...

  9. C#中的IEnumerable<T>知识点

    1.扩展IEnumerable<T>的方法 使继承了IEnumeralbe<T>的接口有了MyS方法 static class MySum {                  ...

  10. 经验总结21--抓取WEB数据，汇率，HtmlAgilityPack

    网上找了非常多资料,PHP的比較多,然后找到有csv文件的.处理起来非常麻烦,国外的站点速度非常慢. 最后还是去页面上抓取数据,我是从中国银行抓取的,各位可去其它站点抓取. 1.模拟请求URL. st ...