Button Click

Button Click のプログラムです。

5  +1  -1

次のリンクをクリックすると "ngp_click.html" が呼び出されます。
Button Click

プログラムの説明

AngularJS サンプルプログラム "ngp_click.html" です。

<!doctype html>
<html ng-app="myApp">
<head>
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function() {
  this.count = 0;
  this.inc = function() { this.count++; }
  this.dec = function() { this.count--; }
});
</script>
</head>
<body>
<div ng-controller="myController as myCtrl">
  {{myCtrl.count}}
  <button ng-click="myCtrl.inc()">+1</button>
  <button ng-click="myCtrl.dec()">-1</button>
</div>
</body>
</html>

html で AngularJS を使用することを宣言します。
head 内で "angular.min.js" を組み込みます。
<html ng-app>

myApp モジュールを作成して myController コントローラーを登録します。
this.inc 関数で count をカウントアップします。
this.dec 関数で count をカウントダウンします。

<script>
var app = angular.module("myApp", []);
app.controller('myController', function() {
  this.count = 0;
  this.inc = function() { this.count++; }
  this.dec = function() { this.count--; }
});
</script>

div で myController を定義します。
{{myCtrl.count}} でカウンターを表示します。
カウントアップのボタンを貼り付けて myCtrl.inc() 関数を呼び出します。
カウントダウンのボタンを貼り付けて myCtrl.dec() 関数を呼び出します。
<div ng-controller="myController as myCtrl"> {{myCtrl.count}} <button ng-click="myCtrl.inc()">+1</button> <button ng-click="myCtrl.dec()">-1</button> </div>

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)