AnjularJS系列3 —— 数据的双向绑定
Posted On the road
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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）
1 <div ng-app="" > 2 <div> 3 <label>Name:</label> 4<input type="text" ng-model="name" placeholder="请输入姓名" name=""> 5 </div> 6<div> 7 <label>问候语：</label> 8 <label>Hello,{{name}}</label> 9 </div> 10 </div>
代码效果：
对比：原生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>
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 —— 数据的双向绑定的主要内容，如果未能解决你的问题，请参考以下文章