Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngChange

[ 日期： | 瀏覽：16,936 | 迴響：2 ]
範例 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 來產生下拉選單的選項，同時指定 select 為 member.name：

檢視原始碼 HTML
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 指令：

檢視原始碼 HTML
1

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

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

檢視原始碼 HTML
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清楚太多了！加油！

發表迴響