angularjs學習筆記之雙向資料綁定_AngularJS
這次我們來詳細講解angular的雙向資料綁定。
一.簡單的例子
這個例子我們在第一節已經展示過了，要看的移步這裡
這裡實現的效果是，在輸入框中輸入內容，下面也會相應的改變對應的內容。這就實現了資料雙向綁定。
二.取值表達式與ng-bind的使用
我們再看一個例子，點擊這裡，文中出現的第一個例子中，{{greeting.text}}和{{text}}就是一個取值表達式了，但是如果你一直刷新頁面，你會發現這樣一個問題，就是頁面有時候會一瞬間的出現「{{greeting.text}} {{text}}」這個字串，那我們該如何解決呢？
這裡就用到ng-bind指令了：用來綁定資料表達式。
例如我們可以把
<p>{{greeting.text}} {{text}}</p>
改為：
"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";
這樣改正之後，頁面刷新就不會有不希望出現的字串出現了。
但是使用指令總是比直接使用表達式的效率低一點，所以我們總結了一個常用規律：一般來說，index使用ng-bind，後續模版中的使用'{{}}'的形式。
三.雙向綁定的典型場景－表單
先看一個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.點擊」取得「，可以在控制台輸出三個數據，郵箱、密碼和選取狀態（true、false）
2.點選「設定」：可以變更兩個輸入框的值和複選框取消選取的狀態；
3.點選「重置」：可以讓資料恢復到初始資料。
因為輸入框中的ng-model和控制器中的數值實現了雙向綁定，所以更改輸入框的值或更改控制器中的值，都會相應的更改雙方的值。就這麼幾行程式碼，就實現了這麼強大的功能，是不是覺得很神奇呢？確實很神奇，不過，更神奇的還在後面呢！繼續吧！
四.動態切換標籤樣式
先看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標籤中，當點擊“綠色”時，執行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”，所以顯示紅色，點擊時執行函數，變成綠色。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
2022年最新5款的angularjs教學從入門到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。
如何解決Vue報錯：無法正確使用v-model進行雙向資料綁定
Aug 25, 2023 pm 04:13 PM
如何解決Vue報錯：無法正確使用v-model進行雙向資料綁定引言：Vue是一種流行的前端框架，它提供了許多方便的功能，其中包括v-model指令用於實現雙向資料綁定。然而，有時我們在使用v-model時可能會遇到一些錯誤，特別是在處理複雜的資料結構時。本文將介紹幾種常見的v-model錯誤，並提供解決方案和程式碼範例。錯誤：v-model與物件屬性的雙向綁定
使用PHP和AngularJS建立響應式網站，提供優質的使用者體驗
Jun 27, 2023 pm 07:37 PM
在現今資訊時代，網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備，為使用者提供優質的體驗，成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站，進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言，非常適合Web開發。 PHP具有許多優點，如易於學習、跨平台、豐富的工具庫、開發效
使用PHP和AngularJS建立Web應用
May 27, 2023 pm 08:10 PM
隨著網路的不斷發展，Web應用已成為企業資訊化建設的重要組成部分，也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展，開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術，它們分別是伺服器端和客戶端的解決方案，透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP
使用Flask和AngularJS建立單頁Web應用程式
Jun 17, 2023 am 08:49 AM
隨著Web技術的快速發展，單頁Web應用程式（SinglePageApplication,SPA）已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序，SPA的最大優勢在於使用者感受更加流暢，同時伺服器端的運算壓力也大幅減少。在本文中，我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py
如何在PHP編程中使用AngularJS？
Jun 12, 2023 am 09:40 AM
隨著Web應用程式的普及，前端框架AngularJS變得越來越受歡迎。 AngularJS是一個由Google開發的JavaScript框架，它可以幫助你建立具有動態Web應用程式功能的網頁應用程式。另一方面，對於後端編程，PHP是非常受歡迎的程式語言。如果您正在使用PHP進行伺服器端編程，那麼結合AngularJS使用PHP將可以為您的網站帶來更多的動態效
使用PHP和AngularJS開發一個線上文件管理平台，方便文件管理
Jun 27, 2023 pm 01:34 PM
隨著網路的普及，越來越多的人使用網路進行檔案傳輸和分享。然而，由於各種原因，使用傳統的FTP等方式進行檔案管理無法滿足現代使用者的需求。因此，建立一個易用、高效、安全的線上文件管理平台已成為了一種趨勢。本文介紹的線上文件管理平台，基於PHP和AngularJS，能夠方便地進行文件上傳、下載、編輯、刪除等操作，並且提供了一系列強大的功能，例如文件共享、搜尋、
AngularJS基礎入門介紹
Apr 21, 2018 am 10:37 AM
這篇文章介紹的內容是關於AngularJS基礎入門介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下。
