這次我們來詳細講解angular的雙向數據綁定。
一.簡單的例子
這個例子我們在第一節(jié)已經展示過了，要看的移步這里
這里實現的效果就是，在輸入框輸入內容，下面也會相應的改變對應的內容。這就實現了數據雙向綁定。
二.取值表達式與ng-bind的使用
我們再看一個例子，點擊這里，文中出現的第一個例子中，{{greeting.text}}和{{text}}就是一個取值表達式了，但是如果你一直刷新頁面，你會發(fā)現這樣一個問題，那就是頁面有時候會一瞬間的出現“{{greeting.text}} {{text}}”這個字符串，那我們該如何解決呢？
這里就用到ng-bind命令了：用于綁定數據表達式。
比如我們可以把
<p>{{greeting.text}} {{text}}</p>改為：
"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";
這樣改正之后，頁面刷新就不會有不希望出現的字符串出現了。
但是使用命令總要比直接使用表達式的效率低一點，所以我們總結了一個常用規(guī)律：一般來說，index使用ng-bind，后續(xù)模版中的使用'{{}}'的形式。
三.雙向綁定的典型場景－表單
先看一個form.html的內容：
<!doctype html><html ng-app="UserInfoModule"><head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> <script src="js/angular-1.3.0.js"></script> <script src="Form.js"></script></head><body> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title">雙向數據綁定</div> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl"> <div class="form-group"> <label class="col-md-2 control-label"> 郵箱： </label> <div class="col-md-10"> <input type="email" class="form-control" placeholder="推薦使用126郵箱" ng-model="userInfo.email"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label"> 密碼： </label> <div class="col-md-10"> <input type="password" class="form-control" placeholder="只能是數字、字母、下劃線" ng-model="userInfo.password"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <div class="checkbox"> <label> <input type="checkbox" ng-model="userInfo.autoLogin">自動登錄 </label> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button class="btn btn-default" ng-click="getFormData()">獲取Form表單的值</button> <button class="btn btn-default" ng-click="setFormData()">設置Form表單的值</button> <button class="btn btn-default" ng-click="resetForm()">重置表單</button> </div> </div> </form> </div> </div> </div> </div></body></html>
再看Form.js的內容：
var userInfoModule = angular.module('UserInfoModule', []); userInfoModule.controller('UserInfoCtrl', ['$scope', function($scope) { $scope.userInfo = { email: "253445528@qq.com", password: "253445528", autoLogin: true }; $scope.getFormData = function() { console.log($scope.userInfo); }; $scope.setFormData = function() { $scope.userInfo = { email: 'testtest@126.com', password: 'testtest', autoLogin: false } }; $scope.resetForm = function() { $scope.userInfo = { email: "253445528@qq.com", password: "253445528", autoLogin: true }; } } ])實現效果截圖如下：
上圖實現的功能是：
1.點擊”獲取“，可以在控制臺輸出三個數據，郵箱、密碼和選中狀態(tài)（true、false）
2.點擊“設置”：可以更改兩個輸入框的值和復選框取消選中的狀態(tài)；
3.點擊“重置”：可以讓數據恢復到初始數據。
因為輸入框中的ng-model和控制器中的數值實現了雙向綁定，所以更改輸入框的值或者更改控制器中的值，都會相應的更改雙方的值。就這么幾行代碼，就實現了這么強大的功能，是不是覺得很神奇呢？確實很神奇，不過，更加神奇的還在后面呢！繼續(xù)吧！
四.動態(tài)切換標簽樣式
先看color.html的內容：
<!doctype html><html ng-app="MyCSSModule"><head> <meta charset="utf-8"> <link rel="stylesheet" href="CSS1.css"></head><style type="text/css"> .text-red { background-color: #ff0000; } .text-green { background-color: #00ff00; }</style><body> <div ng-controller="CSSCtrl"> <p class="text-{{color}}">測試CSS樣式</p> <button class="btn btn-default" ng-click="setGreen()">綠色</button> </div></body><script src="js/angular-1.3.0.js"></script><script src="color.js"></script></html>我們看第19行：有一個“color”的變量存在于這個p標簽中，當點擊“綠色”時，執(zhí)行setGreen函數，改變“color”的值為“green”，所以更改了類名，從而也更改了背景顏色。使用這樣的方法，讓我們不用去直接操作元素，而是加一個變量就行了。代碼簡潔直觀。
我們再看一下color.js的內容：
var myCSSModule = angular.module('MyCSSModule', []);myCSSModule.controller('CSSCtrl', ['$scope', function($scope) { $scope.color = "red"; $scope.setGreen = function() { $scope.color = "green"; } }])屬性“color”的默認值為“red”，所以顯示紅色，點擊時執(zhí)行函數，變?yōu)榫G色。
新聞熱點
疑難解答
