Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngChange

範例 1

我們在前幾篇練習了一連串跟下拉選單有關的 ng-options 宣告式語法(Directives Syntax)。而今天則是順便再將跟下拉選單也有關係的 ng-change 做個簡單的說明。

讓我們一樣延用上篇範例中的 Controller 及 Model:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var SelectCtrl = function($scope) {
	$scope.onepiece = {
		'船長': {
			name: '蒙其·D·魯夫',
			age: 19,
			skills: ['橡膠槍', '橡膠火箭砲', '換檔', '霸氣']
		}
		// 略...
		,'音樂家': {
			name: '布魯克',
			age: 90,
			skills: ['催眠曲·輪舞', '鼻唄三丁·矢筈斬', '冰凍劍', '哼歌·吹雪斬']
		}
	};
};

然後我們利用 ng-options 來產生下拉選單的選項,同時指定 selectmember.name

1
2
3
4
5
6
7
<div class="alert alert-info">
	<select ng-model="role" ng-options="member.name as member.name for (title, member) in onepiece">
		<option value="">--請選擇角色--</option>
	</select>
 
	<div ng-show="role!=null">選擇的是:{{ role }}</div>
</div>

基本的效果就是選到那筆就顯示值出來:
ngchange-0

目前是直接將值直接顯示出來,現在筆者希望當值被改變時,觸發一個事件,記錄並顯示改變幾次了。先在 Select 下拉選單中加上 ng-change 指令:

1
<select ng-model="role" ng-options="member.name as member.name for (title, member) in onepiece" ng-change="change();">

然後也不直接顯示 role,而是改成顯示另一個 result 模型的內容:

1
<div ng-show="result!=''">選擇的是:{{ result }}</div>

接著打開我們的 js/controller.js,加入相關的 Model 及 change 方法:

檢視原始碼 JavaScript
1
2
3
4
5
6
$scope.result = '';
$scope.changeCount = 0;
$scope.change = function(){
	$scope.changeCount++;
	$scope.result = $scope.role + '(變更了 ' + $scope.changeCount + ' 次)';
};

最後就能存檔來預覽結果囉!
ngchange-1

當第一次選擇 "羅羅亞·索隆" 時,改變次數會變成 1,接著當再換成 "香吉士" 後,則會變成 2。但如果這時再時如果展開下拉選單,但還是選擇到 "香吉士" 的話,則次數是不會更新的。所以可以知道,ng-change 是當值被改變時才會觸發的指令。

那它到底跟 ng-click 差別在那呢?各位可以把 ng-change 改成 ng-click 後再試試同樣的動作,再看看發生什麼變化了。這就當成作業給大家練習了。

範例 1

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

2 筆針對 [AngularJS]AngularJS 入門教學 - ngChange 的迴響

  1. 建議要不要加上jsbin或者jsfiddle或者plunker這類的程式碼網頁給大家玩玩啊
    能立即讓大家測試

    否者大家還要逐個下載程式才能測試

    BTW 你的教學真的很清楚!很容易明白!比官方的documentation清楚太多了!加油!

發表迴響