双向数据绑定是angularjs的一大特性，这个特性在实际开发中省了不少事儿。之前第二篇提过数据绑定，这一篇从实际开发的案例中具体看下双向数据绑定的便捷。
首先看一个场景：
在 注册/登录 中经常遇到这样的场景，来看看angular的解决方案。
HTML：
<fieldset ng-controller="defaultInfo">
<legend>用户登录</legend>
<div class="box_a">
<label for="uName">用户名：</label>
<input class="text_a" id="uName" type="text" ng-model="uName">
<button ng-click="default_uName()">默认值</button>
</div>
<div class="box_a">
<label for="uPassword">密 码：</label>
<input class="text_a" id="uPassword" type="password" ng-model="uPassword">
<button ng-click="default_uPassword()">默认值</button>
</div>
<div class="box_a">
<input id="uTrue" type="checkbox" ng-model="uTrue">
<label for="uTrue">记住我</label>
<button ng-click="default_uTrue()">默认值</button>
</div>
</fieldset>
JS：
// defaultInfo控制器
MyApp.controller('defaultInfo',['$scope',function($scope){
$scope.uName = "";
$scope.uPassword = "";
$scope.uTrue = false;
// --
$scope.default_uName = function(){
$scope.uName = "miragefirefox@163.com";
}
$scope.default_uPassword = function(){
$scope.uPassword = "miragefirefox";
}
$scope.default_uTrue = function(){
$scope.uTrue = true;
}
}]);
ng-model 绑定标签与控制器的变量相对应，ng-click 挂载控制器点击事件，在控制器对应函数中给 model 重新赋值即可。
controller的数据通过事件绑定到model上，同样，controller也能读取到model上的数据（这里就不做演示了）。
有了双向数据绑定省去了过去反复读取DOM的繁琐过程，大大提高开发效率。
======================================================================================================================================
再来看一个动态修改样式的案例：
HTML：
<!--html-->
<div ng-controller="bgColor" class="box_b" ng-class="{ngRed:bgRed ,ngBlue:bgBlue }">
<button ng-click="changeBg('r')">红色</button>
<button ng-click="changeBg('b')">蓝色</button>
</div>
<!--css-->
.ngRed{ background:red; }
.ngBlue{ background:blue; }
JS：
// bgColor控制器
MyApp.controller('bgColor',['$scope',function($scope){
$scope.bgRed = false;
$scope.bgBlue = false;
$scope.changeBg = function(color){
switch(color){
case 'r':
$scope.bgRed = true;
$scope.bgBlue = false;
break;
case 'b':
$scope.bgRed = false;
$scope.bgBlue = true;
break;
}
}
}]);
通过 ng-class 动态改变div背景色，ng-class 支持表达式赋值class样式；
{ngRed:bgRed ,ngBlue:bgBlue } bgRed值为true时使用ngRed样式，bgBlue值为true时则使用ngBlue样式，以此类推ng-class可以写很多样式。
controller 这块儿非常简单了根据传参切换 true/false 值即可。
======================================================================================================================================
菜单的显示/隐藏案例：
HTML：
<div ng-controller="toggleM">
<h1 ng-click="upDown()">菜单标题</h1>
<ul ng-show="onOff">
<li>目录一</li>
<li>目录二</li>
<li>目录三</li>
<li>目录四</li>
<li>目录五</li>
</ul>
</div>
JS：
// toggleM控制器
MyApp.controller('toggleM',['$scope',function($scope){
$scope.onOff = false;
$scope.upDown = function(){
$scope.onOff = !$scope.onOff;
}
}])
ng-show 和 ng-hide 是angular专门为元素的显示/隐藏定制的指令，非常便捷。ng-show 为 true 时元素显示，false时元素隐藏；ng-hide则相反。在controller中改变ng-show的值即可实现元素的显示/隐藏。
以上三个实际开发中常见的场景用angular的双向数据绑定实现起来比传统方式高效便捷多了。