読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

AngularJS1.x その0003 ng-clickディレクティブ

制作 javascript angularjs

参考にさせて頂いたページ

AngularJS

AngularJS: イベントリスナーを登録するには?(ng-clickなど) - Build Insider

index.htmlの作成とその記述内容

例として以下の通り。

<div ng-controller="SampleCtrl">
  <input type="text" ng-model="name" />
  <button ng-click="onclick()">送信</button>
  <div>{{msg}}</div>
</div>

ng-app.jsの作成とその記述内容

例として以下の通り。

var SampleCtrl = function($scope) {
  // デフォルトの値を設定
  $scope.msg = 'こんにちは、誰かさん!';
  // ng-click="onclick"なので、onclickメソッドを定義
  $scope.onclick = function() {
    $scope.msg = 'こんにちは、' + $scope.name + 'さん!';
  };
}

このソースコードについて

input要素は、ng-model="name"なので、入力される値はng-app.jsの中の$scope.nameに紐付く。

button要素は、ng-click="onclick()"なので、これをクリックすると、ng-app.jsの中のonclickメソッドが実行される。

button要素がクリックされる度に、$scope.msgの値は、'こんにちは、' + $scope.name + 'さん!'で上書きされる。