Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngShow 與 ngHide

[ 日期： | 瀏覽：19,053 | 迴響：6 ]
範例 1

常常我們會依某些欄位的值或是狀態來決定是否顯示或隱藏某些元素內容，所以 AngularJS 也有提供方便的宣告式語法(Directives Syntax)讓我們直接來做 model 的綁定使用。

先開啟 HTML 來加入相關程式(practice/index.html)：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!doctype html>
<html ng-app>
<head>
	<meta charset="UTF-8">
	<title>男丁格爾's 脫殼玩 - AngularJS</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
	<div class="well span6" style="margin-top:20px;">
		<label>Show?
			<input type="checkbox">
		</label>
		<hr>
		<h2>男丁格爾</h2>
	</div>
</body>
</html>

筆者希望一開始 h2 是先隱藏起來的，然後當勾選 Show? 之後才顯示，所以我們得將勾選框設定為 model，並將 h2 的顯示與否指定為跟勾選框相關聯。

首先先將勾選框加上 ng-model 為 checked：

檢視原始碼 HTML
1

<input type="checkbox" ng-model="checked">

接著在 h2 元素中加入一個新的宣告式語法(Directives Syntax) - ng-show，並將它跟剛剛的 checked 做綁定：

檢視原始碼 HTML
1

<h2 ng-show="checked">男丁格爾</h2>

一開始沒被勾選，所以 checked 值會是 undefined，也就是 false，所以 ng-show 判斷為 false 時就不會顯示 h2 元素：
ng-show-and-ng-hide-0

當有被勾選時，checked 值就會為 true，所以 ng-show 會因為 true 就顯示該元素：
ng-show-and-ng-hide-1

不過剛剛說的勾選框主要的值就是 true 或 false，那有辦法改成 YES 或 NO 嗎？嘿~Google 大神可是都有考慮到的咧！如果想自訂的話，只要分別指定 ng-true-value 及 ng-false-value 就可以囉。

來~讓我們多加一組勾選框，透過勾選框來改變 h2 的內容：

檢視原始碼 HTML
1
2
3

<label>English?
	<input type="checkbox" ng-model="eng" ng-true-value="abgne.tw" ng-false-value="男丁格爾">
</label>

當勾選時就把 eng 值指定為 "abgne.tw"；反之就是"男丁格爾"。然後再將 h2 的內容指定為 eng：

檢視原始碼 HTML
1

<h2 ng-show="checked">{{ eng }}</h2>

ㄟ~當預覽時試著勾選 Show? 的話，你有看到 h2 顯示出來嗎？
ng-show-and-ng-hide-2

沒有吧！再試著勾選 English 就會顯示內容出來了，那這是程式有錯嗎？

還記得剛剛筆者有提到過嗎？第一次若是沒有勾選的話，預設的值是 undefined 的，基本上它不是 true 也不是 false，所以 eng 的值就不會是 ng-true-value 及 ng-false-value 的值。

因此我們可以透過 Controller 來幫我們將 model 進行初始化的動作，先將 div 加上 ng-controller 的設定：

檢視原始碼 HTML
1
2
3

<div class="well span6" style="margin-top:20px;" ng-controller="ShowHideCtrl">
...
</div>

接著新增一個 controller.js 檔，建立一個 ShowHideCtrl 並進行初始化程式：

檢視原始碼 JavaScript
1
2
3
4

var ShowHideCtrl = function($scope){
	$scope.checked = false;
	$scope.eng = '男丁格爾';
};

這樣就能正常執行囉~
ng-show-and-ng-hide-3

至於 ng-hide 的部份，就當成各位的作業囉！請再新增一個 h2 元素，至於要顯示什麼內容都無所謂。接下來讓 Show? 的勾選框可以切換顯示這兩個 h2 元素吧！

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

6 筆針對 [AngularJS]AngularJS 入門教學 - ngShow 與 ngHide 的迴響

  1. 感謝提供非常棒的 AngularJS 入門教學，不小心看到本頁範例程式碼有小小錯誤了。

    男丁格爾

    hg-show (X) → ng-show (O)
    checked 的前後引號不一樣？

    特提出以利勘誤，謝謝！

發表迴響