AnjularJS系列3 —— 数据的双向绑定
第三篇，双向的数据绑定
数据绑定是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
代码效果：
对比：原生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>
代码效果：
AnjularJS系列3 —— 数据的双向绑定的更多相关文章
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- 数据的双向绑定 Angular JS之开端篇
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- JavaScript实现数据的双向绑定
接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
随机推荐
- HTML+CSS项目开发总结
好几天没更新博客了,刚实战完一个HTML+CSS的简单项目.经过几天的摸索,发现收益良多.之前只是单纯得写demo,看知识点,没有亲自实战项目.但实战过后才会了解,如何才能更好地提升自己的技术.针对这 ...
- 深化管理、提升IT的数据平台建设方案
谈到信息化,每个企业有每个企业的业务模式,每个企业有每个企业不同的思考.落地有效的信息化建设一定紧跟着企业的发展,围绕业务和管理,来提升效率,创造价值. 对于企业如何在发展的不同阶段提升信息化建设,这 ...
- 拖拽手势和清扫手势冲突时（UIPanGestureRecognizer和UISwipeGestureRecognizer冲突时）
故事发生在这样的情境上:给整个控制器添加了一个拖拽手势,然后又在控制上的每个Cell上加了左滑清扫手势,然后问题来了:只有拖拽手势起作用,而左滑手势没有效果了,然后怎么解决这个问题呢!先上图: 当给整 ...
- WKWebView浅析
原文链接:supermokey WKWebView 一个WKWebView对象展示交互的web内容,例如应用于app内的浏览器.你可以在你的App中使用WKWebView. 综述 Important: ...
- git推送本地分支到远程分支
场景 有时候我们开发需要开一个分支,这样可以有效的并行开发. 开分支有两种方式: 一种是在远程开好分支,本地直接拉下来; 一种是本地开好分支,推送到远程. 远程先开好分支然后拉到本地 git chec ...
- 介绍几个好用的vs插件
1.打开扩展管理器. 1.jsenhancement插件. 参考文章:http://www.cnblogs.com/dudu/archive/2011/02/27/vs2010_extension_J ...
- 利用DetachedCriteria构建HQL参数动态匹配
此文章是基于 搭建SpringMVC+Spring+Hibernate平台 1. DetachedCriteria构建类:CriteriaBuilder.java package com.ims.pe ...
- 代码管理工具 --- git的学习笔记二《git的工作原理》
通过几个问题来学习代码管理工具之git 一.git是什么?为什么要用它?使用它的好处?它与svn的区别,在Mac上,比较好用的git图形界面客户端有 git 是分布式的代码管理工具,使用它是因为,它便 ...
- kubernetes 文档
kubernetes 官方文档:http://kubernetes.io/docs/ null
- Html-IOS下input的样式添加不上的解决方案
问题描述: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&qu ...