第三篇,双向的数据绑定

数据绑定是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. Android Weekly Notes Issue #232

    Android Weekly Issue #232 November 20th, 2016 Android Weekly Issue #232 本期内容包括: Kotlin的优势讨论; MVVM模式结 ...

  2. 安卓DJ113舞曲网应用客户端 项目源码(服务器+客户端)

    Android DJ113舞曲网app客户端 播放器源码  项目源码(服务器+客户端),这个项目整体有点类似天天动听的效果,非常漂亮的,支持第三方登录等功能,非常完整的一个音乐项目. 源码下载:htt ...

  3. 【代码笔记】iOS-用户发布后能保存崩溃

    一,工程图. 二,代码. AppDelegate.m #import "AppDelegate.h" #import "RootViewController.h" ...

  4. ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现

    在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的.服务端验证最终实现在相应的ModelVa ...

  5. SQL优化技术分析-2:SQL书写的影响

    1.同一功能同一性能不同写法SQL的影响. 如一个SQL在A程序员写的为 Select * from zl_yhjbqk B程序员写的为 Select * from dlyx.zl_yhjbqk(带表 ...

  6. 在Ubuntu X64上编译Hadoop

    在之前的文章中介绍了如何直接在Ubuntu中安装Hadoop.但是对于64位的Ubuntu来说,官方给出的Hadoop包是32位的,运行时会得到警告: WARN util.NativeCodeLoad ...

  7. SQL中EXISTS的使用

    1.简介 不相关子查询:子查询的查询条件不依赖于父查询的称为不相关子查询. 相关子查询:子查询的查询条件依赖于外层父查询的某个属性值的称为相关子查询,带EXISTS 的子查询就是相关子查询 EXIST ...

  8. PHP中的数据库四、mongodb

    h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...

  9. BZOJ 2588: Spoj 10628. Count on a tree [树上主席树]

    2588: Spoj 10628. Count on a tree Time Limit: 12 Sec  Memory Limit: 128 MBSubmit: 5217  Solved: 1233 ...

  10. 1877: [SDOI2009]晨跑

    1877: [SDOI2009]晨跑 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 2007  Solved: 1085[Submit][Status][ ...