AngularJS - HTML DOM

你好，有志成為網頁開發者的朋友們！今天，我們將要深入探索 AngularJS 的迷人世界，以及它是如何與 HTML DOM（文件對象模型）相互作用的。作為你親切友善的鄰居電腦老師，我非常興奮能夠引導你走過這段旅程。如果你是編程新手，別擔心——我們會從基礎開始，逐步學習。那麼，來一杯咖啡（或者茶，如果你喜歡的話），我們開始吧！

AngularJS 和 HTML DOM 的介紹

在我們細說之前，讓我們快速了解 AngularJS 和 HTML DOM 是什麼。

AngularJS 是一個強大的 JavaScript 框架，它為 HTML 添加了新的屬性，使得創建動態網頁應用程序更加容易。這就像給你的普通 HTML 賦予超能力！

另一方面，HTML DOM 則是 HTML 文档的編程接口。它將文檔的結構表示為樹狀層次，讓你可以訪問和操作頁面的內容、結構和樣式。

現在，讓我們探討 AngularJS 如何通過其指令來提升我們與 HTML DOM 的工作能力。

ng-disabled 指令

ng-disabled 指令就像是你 HTML 元素的交通燈。它可以根据條件啟用或禁用一個元素。讓我們看一個例子：

<input type="checkbox" ng-model="myCheckbox">
<button ng-disabled="!myCheckbox">點我！</button>

在這個例子中，按鈕在被勾選框勾選之前是禁用的。這就像告訴按鈕，“直到你的朋友勾選框說可以，你才能玩！”

當勾選框未被勾選時，myCheckbox 是 false，所以 !myCheckbox 是 true，禁用按鈕。當勾選時，則相反，啟用按鈕。

ng-show 指令

接下來是 ng-show 指令。把它當成魔術師的斗篷——它可以根据條件讓元素出現或消失。這是它的工作方式：

<p ng-show="showSecret">秘密代碼是 42！</p>
<button ng-click="showSecret = !showSecret">
{{showSecret ? '隱藏' : '顯示'}} 秘密
</button>

在這個例子中，當 showSecret 為 true 時，帶有秘密代碼的段落才會顯示。按鈕會切換這個值。這就像與你的網頁元素玩捉迷藏！

ng-hide 指令

ng-hide 指令是 ng-show 的淘氣雙胞胎。當條件為 true 時，ng-show 會顯示元素，而 ng-hide 則會隱藏它們。讓我們看看它是如何行動的：

<div ng-hide="loading">
<h2>歡迎來到我的網站！</h2>
<p>這個內容在準備好時會加載。</p>
</div>
<p ng-show="loading">加載中...請稍候。</p>

在這裡，我們在頁面加載時隱藏主內容，並顯示一個加載信息。當 loading 變為 false 時，就像拉開帷幕，顯示你的網站！

ng-click 指令

ng-click 指令就像是你電視遙控器上的按鈕——它讓你定義當元素被點擊時會發生什麼。這有一個簡單的例子：

<button ng-click="count = count + 1" ng-init="count=0">
點擊次數：{{count}}
</button>

這會創建一個按鈕，計算它被點擊了多少次。每次點擊都會增加 count 變量，並在按鈕文本中顯示。這就像擁有一個個人的點擊計數器！

範例：將所有內容整合

現在，讓我們將這些指令整合到一個更複雜的範例中。想像我們正在創建一個簡單的任務管理器：

<div ng-app="taskManager" ng-controller="taskCtrl">
<h2>我的任務管理器</h2>

<input type="text" ng-model="newTask" placeholder="輸入一個新任務">
<button ng-click="addTask()" ng-disabled="!newTask">添加任務</button>

<ul>
<li ng-repeat="task in tasks">
{{task}}
<button ng-click="removeTask($index)">完成</button>
</li>
</ul>

<p ng-show="tasks.length == 0">還沒有任務。上面添加一些任務吧！</p>

<button ng-click="clearAll()" ng-hide="tasks.length == 0">清除所有任務</button>
</div>

<script>
var app = angular.module('taskManager', []);
app.controller('taskCtrl', function($scope) {
$scope.tasks = [];

$scope.addTask = function() {
if ($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};

$scope.removeTask = function(index) {
$scope.tasks.splice(index, 1);
};

$scope.clearAll = function() {
$scope.tasks = [];
};
});
</script>

讓我們分解一下：

我們使用 ng-disabled 來防止添加空任務。
ng-click 用於添加任務、刪除單個任務和清除所有任務。
ng-show 在沒有任務時顯示一條信息。
ng-hide 在沒有任務時隱藏“清除所有”按鈕。
我們還引入了 ng-repeat，為我們數組中的每個任務創建一個列表項。

輸出

當你運行這段代碼時，你會看到一個簡單但功能性完整的任務管理器。你可以添加任務、將其標記為完成（從列表中移除）和清除所有任務。UI 會根據你的操作動態更新，展示了 AngularJS 指令的力量。

結論

好了，各位！我們已經探討了一些最常見的 AngularJS 指令，用於操作 HTML DOM。這些工具讓你輕鬆地創建動態、響應式的網頁應用程序。記住，熟能生巧，所以不要害怕在你自己的項目中嘗試這些指令。

這裡是一份我們討論過的指令的快速參考表：

指令	目的
ng-disabled	根據條件禁用元素
ng-show	當條件為 true 時顯示元素
ng-hide	當條件為 true 時隱藏元素
ng-click	指定元素被點擊時的行為

持續編程，持續學習，最重要的是，玩得開心！網頁開發的世界浩瀚而令人興奮，而你只是剛剛開始。下次見，快樂編程！

Credits: Image by storyset