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

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

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 + 'さん！'で上書きされる。