第三篇,双向的数据绑定

数据绑定是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. kindle型号

    这篇文章为 Kindle 新手解决三个问题:怎么辨别Kindle 型号?通过 Kindle 外观判断准确吗?Kindle序列号在那里? 贴吧吧友提问的原话"在咸鱼看到一台,那哥们说也不知道K ...

  2. iOS项目iCloud及CloudKit Dashboard运用

    CloudKit是苹果推出的基于iCloud的一个云端数据存储服务.其 主要由下面两部分组成: 一个仪表web页面,用于管理公开数据的记录类型. 一组API接口,用于iCloud和设备之间的数据传递. ...

  3. Android使用最小宽度限定符时最小宽度的计算

    Android开发中最头疼的问题之一就是兼容不同尺寸和分辨率的设备.这里推荐一篇总结的比较完整的<Android开发:最全面.最易懂的Android屏幕适配解决方案>.这篇文章对屏幕兼容的 ...

  4. memcached安装配置+基础操作

    先安装依赖关系 下载libevent-2.0.21-stable.tar.gz wget https://github.com/downloads/libevent/libevent/libevent ...

  5. mongodb 性能篇

    一.  索引及其优化 索引的概述 数据库的索引好比是一本书前面的目录,能加快数据查询的速度. 适当的地方增加索引,不合理的地方删除次优索引,能优化性能较差的应用. 索引的操作 基础索引:db.ken. ...

  6. Android使用C++截屏并显示

    使用android底层自带的截屏源码进行修改后,将截取屏幕的内容再次显示在屏幕上,使屏幕呈现出暂停的效果. android自带的截屏代码在android\JB\frameworks\base\cmds ...

  7. 【转】前端工程师必须了解的 谷歌 HTML/CSS 规范

    背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...

  8. 产生冠军 hdoj_2094 巧用set

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  9. C# 带签名dll破解

    首先申明,本文只是从技术的角度来分析下怎样破解带签名的C#写的dll文件.大家如有遇到收费的软件或类库还是应该去购买正版,程序员何苦为难程序员呢. 不带签名的破解 不带签名的dll文件的破解很简单,通 ...

  10. php调接口

    浏览器直接访问接口时会弹出账号密码框 当用程序调用时需要加入    curl_setopt($ch, CURLOPT_USERPWD, "$username:$password") ...