第三篇，双向的数据绑定

数据绑定是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）

 <div  ng-app="" >

				 <div> <label>Name:</label>

				<input type="text" ng-model="name"  placeholder="请输入姓名" name="">

				 </div><div>             <label>问候语：</label>

				  <label>Hello,{{name}}</label>

				         </div>

				     </div>

AngularJS

代码效果：

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

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

 <body>

							     <div>

							         <label>Name:</label>

							         <input type="text" id="name"  placeholder="请输入姓名" onkeyup ="namechange();" name="">

							     </div>

							     <div>

							         <label>问候语：</label>

							         <label id="greeting"></label>

							     </div>

							 </body>

							 <script type="text/javascript">

							     function namechange()

						     {

					         var name=document.getElementById('name').value;

				         document.getElementById('greeting').innerText="Hello,"+name;

			     }

		 </script>

Js

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

<div id="myBind" ng-app="myBind" ng-controller="MyBindctrl">

			<div>

			<label>昵称:</label>

			<select ng-model="selectname" ng-options="x.name for x in nameInfo">

			</select>

			<input type="button" value="获取年龄" ng-click="GetAge();">

			</div>

			<div>

			<label>年龄：</label>

			<label>{{user.agetext}} </label>

			</div>

			</div>

			</body>
<script type="text/javascript">

				var myModule = angular.module('myBind', []);

				myModule.controller("MyBindctrl",function($http,$scope){

				$scope.selectname= '';

				$scope.nameInfo= [{name:"张立伟",age:20},{name:"闵志涛",age:21},{name:"杨一凡",age:22},{name:"黄征",age:29}];

				$scope.GetAge=function(){

			var _bl=false;

		for(var i=0;i<$scope.nameInfo.length;i++)

		{

	if ($scope.nameInfo[i].name ==  $scope.selectname.name) {

	$scope.user.agetext= $scope.selectname.name+"今年"+$scope.nameInfo[i].age+"岁";

	_bl=true;

break;

}

}

if (!_bl) {

$scope.user.agetext=  "找不到记录";

}

};

});

<script>

代码效果：

昵称:
年龄： {{agetext}}

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

  1. 数据的双向绑定 Angular JS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 一步步实现ABAP后台导入EXCEL到数据库【2】

    前文:http://www.cnblogs.com/hhelibeb/p/5912330.html 既然后台作业只能在应用服务器运行,那么,我们可以先将要上传的数据保存在应用服务器中,之后再以后台作业 ...

  2. ViewPager 重新加载 及 PagerAdapter 使用

    PagerAdapter 简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAda ...

  3. 做一个 App 前需要考虑的几件事

    做一个 App 前需要考虑的几件事  来源:limboy的博客   随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  4. 理解和使用SQL Server中的并行

    许多有经验的数据库开发或者DBA都曾经头痛于并行查询计划,尤其在较老版本的数据库中(如sqlserver2000.oracle 7.mysql等).但是随着硬件的提升,尤其是多核处理器的提升,并行处理 ...

  5. log4j:ERROR Failed to rename [/log/xxx.log] to [/log/xxx.log.2016-11-23.log]

    Log4j报错: log4j:ERROR Failed to rename [/log/xxx.log] to [/log/xxx.log.2016-11-23.log] google了一下发现是个b ...

  6. THINKPHP源码学习--------验证码类

    TP3.2验证码类的理解 今天在学习中用到了THINKPHP验证码,为了了解究竟,就开始阅读TP验证码的源码. 源码位置:./ThinkPHP/Library/Think/Verify.class.p ...

  7. svn cleanup 执行失败时，可以勾选 break locks,

  8. 封装的ajax

    function ajax(method,url,data,success){ if(window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, ...

  9. 【三石视频教程】当FineUIPro遇到ReportViewer

    FineUIPro 下个版本(v2.8.0)即将支持 ReportViewer,为此三石特别制作了一期视频教程,供大家参考. 运行效果图:   视频下载:http://pan.baidu.com/s/ ...

  10. FCM聚类算法介绍

    FCM算法是一种基于划分的聚类算法,它的思想就是使得被划分到同一簇的对象之间相似度最大,而不同簇之间的相似度最小.模糊C均值算法是普通C均值算法的改进,普通C均值算法对于数据的划分是硬性的,而FCM则 ...