[AngularJS]AngularJS 入門教學 - ng-submit

一般在輸入方塊中按下 Enter 鍵並不會有什麼特別的反應，不過若這輸入方塊是在表單中，且表單有 action 屬性的話，則會觸發表單的送出(submit)事件來將表單中的欄位內容送往指定的位置。

而通常像是在搭配 Ajax 來處理表單時，也都需要特別取消表單的送出(submit)事件。因為表單的送出(submit)事件是一個針對表單的事件，所以 AngularJS 也提供了 ng-submit 來搭配使用。

假設筆者有一個可以讓使用者來新增技能的表單：

1
2
3
4
5
6
7

<form class="well span6" style="margin-top:20px;" ng-submit="submit()" ng-controller="Ctrl">
	<label>請輸入你會的技能:</label>
 	<input type="text" ng-model="skill" name="skill" />
 
	<input type="submit" id="submit" value="加入" />
	<div>技能 = {{ skills }} </div>
</form>

當使用 AngularJS 所提供的 ng-submit時，表單不能有 action 屬性才行，不然表單一樣會直接被送出。

接著在 js/controller.js 中新增一個 Ctrl 控制器：

1
2
3
4
5
6
7
8
9
10
11

var Ctrl = function($scope){
	$scope.skills = [];
 
	$scope.skill = '';
	$scope.submit = function(){
		if(!!$scope.skill) {
			$scope.skills.push($scope.skill);
		}
		$scope.skill = '';
	}
};

這個範例的動作很簡單，就是當使用者輸入完一個技能後，當按下加入鈕或是 Enter 鍵時觸發 .submit() 後，將所輸入的內容存到 skills 陣列中。

若沒問題的話，就來預覽一下畫面：

試著在輸入方塊中輸入一些內容後按下加入鈕：

順利的話就會看到內容被加入到陣列中並顯示出來，同時網頁也並沒像是表單被送出時的重整感覺吧！

不過，我們並沒有針對按鈕來加入像是 ng-click 的指令，那它為什麼能有作用呢？嘿~當然是因為它在表單中，且它的 type 是 submit 的關係。因此當它被點擊時，其實就是觸發了我們剛剛透過 ng-submit 所指定的動作囉。

那...各位也能試試直接在輸入後直接按下 Enter 鍵，這也會觸發表單的送出喔！

如果想要練習更多一點的話，那麼就請多新增幾個表單欄位，然後一樣將內容加到陣列中，接著再將資料輸出在表格中。唔~應該很難懂我在說什麼，沒關係，讓各位先看一下筆者做的結果：

想試試的就依上面的畫面做看看囉！