Angular.jsでselectに変更があった時に処理を行う

Angular.jsでselectに変更があった時に、何らかの処理を行ってみます。

ng-repeatで設定

Angular.jsでselect変更時に処理を行う場合、ng-changeを使います。
ng-repeatで設定したselectで実装してみます。

HTML

<div ng-controller="select_Ctrl">
	<select name="select" ng-model="select" ng-change="selectChange()">
		<option value="">-----</option>
		<option value="{{option.value}}" ng-repeat="option in options">{{option.name}}</option>
	</select>
</div>

JavaScript

angular.module('app', []).controller('select_Ctrl', function($scope) {
	$scope.select = null;
	// selectに設定するoption
	$scope.options = [
		{
			'name': '高海 千歌',
			'value': 0
		}, {
			'name': '桜内 梨子',
			'value': 1
		}, {
			'name': '松浦 果南',
			'value': 2
		}, {
			'name': '黒澤 ダイヤ',
			'value': 3
		}, {
			'name': '渡辺 曜',
			'value': 4
		}, {
			'name': '津島 善子',
			'value': 5
		}, {
			'name': '国木田 花丸',
			'value': 6
		}, {
			'name': '小原 鞠莉',
			'value': 7
		}, {
			'name': '黒澤 ルビィ',
			'value': 8
		}
	]
	$scope.selectChange = function() {
		  console.log($scope.select);
	}
});

select変更時にconsoleを出力することができました。
ng-repeatでのデモページ
　

ng-optionsで設定

ng-optionsで同様に実装してみます。

HTML

<div ng-controller="select_Ctrl">
	<select name="select" ng-model="select" ng-change="selectChange()" ng-options="option.value as option.name for option in options">
		<option value="">-----</option>
	</select>
</div>

JavaScriptは先ほどと同じです。
ng-repeatのときと同じく、select変更時にconsoleを出力することができました。
ng-optionsのデモページ

ng-repeatとng-optionsでの違いですが、HTMLに直接記述している1番目のoptionを選択したとき、ng-repeatは空、とng-optionsはnullが返ってくるようです。
　

【参考サイト】

• AngularJS セレクトメニューとng-change | rilakkuma3xjapanのブログ