[AngularJS]AngularJS 入門教學 - ngIf

筆者今天要跟各位介紹 ng-if 這個宣告式語法(Directives Syntax)。跟一般所學過的 if 判斷不太一樣的是，如果條件為 true 時會建立一個新的元素，若為 false 則會刪除該元素。

請注意喔，很多人可能會覺得"看到"的效果跟 ng-show 及 ng-hide 一樣。不過 ng-show 及 ng-hide 只是改變元素的可見度，但 ng-if 是會動態增減元素的唷！

讓我們直接來看基本的用法：

1
2
3
4
5
6
7
8
9
10
11

<div class="well span4" style="margin-top:20px;" ng-controller="Ctrl">
	<label><input type="checkbox" ng-model="checked" style="margin:0;"> 勾選?</label>
 
	<div class="alert" ng-show="checked">
		<strong>使用 ng-show!</strong>
	</div>
 
	<div class="alert alert-success" ng-if="checked">
		<strong>使用 ng-if=checked</strong>
	</div>
</div>

範例中多放了一個 div 區塊並加上 ng-show 的指令是因為要讓各位能更了解 ng-show、ng-hide 及 ng-if 的區別。

而 ng-if 的判斷也是使用 Angular 表達式(Angular Expressions)。

讓我們來看一下一開始的畫面：

現在並沒有看到額外兩個 div 對吧！但讓我們來看現在當下的網頁原始碼內容：

有發現到嗎？我們使用 ng-show 來控制的 div 是存在網頁元素中的，但用 ng-if 控制的 div 並不存在。請特別記一下，原始碼中有一段特別的註解：

目前註解下方是沒有任何元素的。那讓我們來勾選看看：

因為 checked 變成 true 了，所以兩個 div 都顯示了，那再讓我們來看現在當下的網頁原始碼內容：

有看到原本加上 ng-if 的 div 現在出現在原始碼中了嗎？再特別強調一次，ng-if 是會動態增減元素的。

當然除了直接將 ng-if 的值指定為 Model 之外，也能依某個函式的回傳結果來判斷。再新增一個 div：

1
2
3

<div class="alert alert-info" ng-if="show();">
	<strong>使用 ng-if=show();</strong>
</div>

然後在控制器中加上相對應的程式：

1
2
3
4
5

var Ctrl = function($scope){
	$scope.show = function(){
		return $scope.checked;
	};
};

一樣是依 checked 的結果來決定是否勾選。所以...

但不知道有沒有人發覺到一個問題！一般來說函式要有人去呼叫才會執行，而我們這邊只有勾選的動作而已，但也是能觸發我們寫在 ng-if 上的表達式。嘿~有沒有開始覺得雙向資料綁定(Two-way data-binding)真的是很強大呢！

另外一個重點在於因為是會動態增減的關係，所以若是幫元素加上某些功能或某些樣式後刪除它，接下來再增加回來時，那些原本加的樣式可是不會存在的。這個問題就當做作業請各位自行試看看吧！