AngularJS セレクトメニューとng-change

セレクトメニュー (<select>) でアイテムを選択した場合に何らかの処理を実行したい場合はng-changeディレクティブを利用します.

ただし, ng-changeは必ずng-modelディレクティブでモデルをバインディングしておく必要があります.

controller.js

var app = angular.module('selectApp', []);

app.controller('SelectController', function($scope) {
     $scope.selectedItem = null;  //バインドするモデル

     //ng-changeでバインドするイベントハンドラ
    //イベントオブジェクトは渡されないので注意
    $scope.changeItem = function() {
          console.log($scope.selectedItem):  //-> 選択されたアイテムの値
     }
});

select.html

<!--  ...  -->

<select ng-controller="SelectController" ng-model="selectedItem" ng-change="changeItem">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

久々のAngularJSネタでした.

「AngularJS セレクトメニューとng-change」への1件のフィードバック

コメントを残す