双向数据绑定是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的双向数据绑定实现起来比传统方式高效便捷多了。