AngularJs-数据绑定
前言：
我们在做前端工作最重要的是把数据能展示给用户看，展示的时候就是把数据绑定给某个元素。
1，简单的数据绑定
html:
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<title>数据绑定</title>
</head>
<body>
<div ng-controller="myCtl">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/dataBid.js"></script>
</html>
在上面描述中，{{}} 就是我们实现数据绑定的一个方法，下面把数据给 $scope就可以显示出来了
var myModule = angular.module('MyModule',[]);
myModule.controller('myCtl',function($scope){
$scope.greeting={
text:"hello"
}
})
看效果图
但是，这里有一个问题，当你写完代码按住 F5 狂刷新页面的时候，会发现在数据没有绑定到页面元素的时候，显示的是我们的代码{{greeting.text}}
这不是我们想要的结果，我们可以使用angularjs提供的第二种方法来显示数据绑定，使用 ng-bind属性
<div ng-controller="myCtl">
<p><span ng-bind="greeting.text"></span>,Angular</p>
</div>
这样显示的时候就不会有代码显示出来了，接着问题来了（要问挖掘机哪家强？），开个玩笑，呵呵，其实差不多，你是你有两种方式绑定，那我们该用哪一种比较好呢？其实，这是要分场景的，使用 ng-bind 是在主html里比较好，而用到 {{}}呢，是放在模板中比较好。
2，双向数据绑定
什么是双向数据绑定？简单的说就是，数据从后端（指js逻辑这块）展现到前端，从前端也能修改后端的数据。最经典的例子就是form表单提交了。
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>双向数据绑定</title>
</head>
<body>
<div class="row">
<div class="col-md-5">
<form action="" role="form" class="form-horizontal" ng-controller="formCtl">
<div class="form-group">
<label for="" class="col-md-2 contorl-label">登录名：</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="请输入登录名/邮箱/手机号" ng-model="userInfo.loginUser">
</div>
</div>
<div class="form-group">
<label for="" class="col-md-2 contorl-label">密码：</label>
<div class="col-md-10"><input type="text" class="form-control" placeholder="请输入密码" ng-model="userInfo.pwd"></div>
</div>
<div class="form-group">
<!-- <label for="" class="col-md-2 contorl-label"></label> -->
<div class="col-md-10 col-md-offset-2">
<div class="checkbox">
<label >
<input type="checkbox" ng-model="userInfo.checked">
自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<!-- <label for="" class="col-md-2 contorl-label"></label> -->
<div class="col-md-10 col-md-offset-2">
<button id="btnGetFormVal" ng-click="getFormVal()" class="btn btn-primary">获取Form表单的值</button>
<!-- <input type="text" class="form-control" placeholder="" ng-modle=""> -->
<button class="btn btn-default" ng-click="setFormVal()">设置Form表单的值</button>
</div>
</div>
</form>
</div>
</div>
<script src="js/angular-1.3.0.js"></script>
<script src="js/doubleDataBid.js"></script>
</body>
</html>
看这个代码，我们可以用 ng-model来把后端的数据绑定到前面的 input框内。同时使用 ng-click来调用 $scope所定义的方法，来获取和修改form表单的值
var myModule = angular.module('MyModule',[]);
myModule.controller('formCtl',function($scope){
$scope.userInfo = {
loginUser:"duxg",
pwd:'12345678',
checked:true
}
$scope.getFormVal=function(){
console.log($scope.userInfo);
}
$scope.setFormVal=function(){
$scope.userInfo={
loginUser:"nijie",
pwd:"1212",
checked:false
}
}
})
在此说明，ng-bind适用于标签元素，而ng-model适用于文本、选择等元素。
3，总结：
数据绑定这块很简单，我们自己就很常用，就举一个简单的例子吧，我们常用的多条件查询数据，那我们可以把要查询的条件放到一个集合中去，等用户改变那个条件，我们就去修改集合中对应的键值对就好了，然后去调用ajax。是不是一样的道理？
