angularjs學習筆記之雙向資料綁定
- 高洛峰原創
- 2016-12-24 10:07:261360瀏覽
這次我們來詳細講解angular的雙向資料綁定。
一.簡單的例子
這個例子我們在第一節已經展示過了，要看的移步這裡
這裡實現的效果就是，在輸入框輸入內容，下面也會相應的改變對應的內容。這就實現了資料雙向綁定。
二.取值表達式與ng-bind的使用
我們再看一個例子，點擊這裡，文中出現的第一個例子中，{{greeting.text}}和{{text}}就是一個取值表達式了，但是如果你一直刷新頁面，你會發現這樣一個問題，那就是頁面有時候會一瞬間的出現“{{greeting.text}} {{text}}”這個字串，那我們該如何解決呢？
這裡就用到ng-bind指令了：用來綁定資料表達式。
了。
但是使用指令總是比直接使用表達式的效率低一點，所以我們總結了一個常用規律：一般來說，index使用ng-bind，後續模版中的使用'{{}}'的形式。
三.雙向綁定的典型場景－表單
<p>{{greeting.text}} {{text}}</p>
1.點擊」取得「，可以在控制台輸出三個數據，郵箱、密碼和選取狀態（true、false）
2.點擊「設定」：可以更改兩個輸入框的值和複選框取消選取的狀態；
3.點選「重設」：可以讓資料恢復到初始資料。
因為輸入框中的ng-model和控制器中的數值實現了雙向綁定，所以更改輸入框的值或者更改控制器中的值，都會相應的更改雙方的值。就這麼幾行程式碼，就實現了這麼強大的功能，是不是覺得很神奇呢？確實很神奇，不過，更神奇的還在後面呢！繼續吧！
四.動態切換標籤樣式
先看color.html的內容：
"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";
我們看第19行：存在一個「color」的變數”時，執行setGreen函數，改變“color”的值為“green”，所以更改了類別名，從而也更改了背景顏色。使用這樣的方法，讓我們不用去直接操作元素，而是加一個變數就行了。代碼簡潔直觀。
我們再看一下color.js的內容：
<!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>
<p class="panel panel-primary">
<p class="panel-heading">
<p class="panel-title">双向数据绑定</p>
</p>
<p class="panel-body">
<p class="row">
<p class="col-md-12">
<form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
<p class="form-group">
<label class="col-md-2 control-label">
邮箱：
</label>
<p class="col-md-10">
<input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">
</p>
</p>
<p class="form-group">
<label class="col-md-2 control-label">
密码：
</label>
<p class="col-md-10">
<input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
</p>
</p>
<p class="form-group">
<p class="col-md-offset-2 col-md-10">
<p class="checkbox">
<label>
<input type="checkbox" ng-model="userInfo.autoLogin">自动登录
</label>
</p>
</p>
</p>
<p class="form-group">
<p 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>
</p>
</p>
</form>
</p>
</p>
</p>
</p>
</body>
</html>屬性“color”的預設值為“red”，所以顯示紅色，點擊時執行函數，變成綠色。 更多angularjs學習筆記之雙向資料綁定相關文章請關注PHP中文網！