2017-06-24

クリックされた要素の取得と操作

AngularJSでクリック(または何かしらのイベントが実行)された要素を取得・操作する方法です。関係ないコードは極力省いていますので、適宜、読み取ってください。

コード

◆HTML


<button data-color="#fff" ng-click="changeBackground($event)">ホワイト</button>
<button data-color="#000" ng-click="changeBackground($event)">ブラック</button>
<div class="example-area"></div>

◆JavaScript


$scope.changeBackground = function(event){
    var el = angular.element(event.target);
    var e2 = angular.element(document.querySelector(".example-area"));
    e2.attr("style", "background-color:" + el.attr("data-color") + ";");
};

上記のコードでは、ボタンが押されたタイミングでexample-areaクラスが設定された<div>の背景色を変更します。

イベントが発生した要素は event.target で取得することができます。また、取得した要素に対してなんらかの操作を行いたい場合は、angular.element() でjqLiteオブジェクトに変換してから行います。

動作確認

AngularJS】関連記事