<body ng-app="myapp" ng-init="num = 0">まず、<body>にmyappモジュールを設定します。そしてnumという変数を初期化しておきます。これで<body>内でmyappモジュールの機能が使えるようになりました。
<input type="text" ng-model="num">用意した変数numは、ここで使っています。入力フィールドの値を管理するモデルとしてnumを設定しておきます。これで、入力された値がnumに常に保管されるようになりました。
<p class="msg">{{ctl.getData()}}</p>これが、データを取り出し表示している部分です。HeloControllerの「getData」というメソッドを呼び出しています。このメソッドは、現在入力されている番号のデータをテキストとして返すものです。これで必要なデータがいつでもここに表示されます。<button ng-click="ctl.doAction(num)">click</button>今回、新しく登場した属性が「ng-click」です。これは、onclick属性に相当するもので、クリックした際に処理を実行させるものです。<p class="msg">に設定されている{{ctl.getData()}}などはリアルタイムに表示が更新されますが、時には「クリックしたら処理を実行」といったやり方も必要となるでしょう今回はそのサンプルを考えてみました。
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!doctype html>
<html>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
body { color:gray; }
h1 { font-size:18pt; font-weight:bold; }
span.label { display:inline-block;width:50px; color:red; }
input { width:100px; }
.msg { font-size:14pt; font-weight:bold;color:gray; }
</style>
</head>
<body ng-app="myapp" ng-init="num=0">
<h1>データ表示</h1>
<p>ID番号を入力して下さい。</p>
<div ng-controller="HeloController as ctl">
<div class="input">
<span class="label">ID:</span>
<input type="text" ng-model="num">
<button ng-click="ctl.doAction(num)">click</button>
</div>
<p class="msg">{{ctl.getData()}}</p>
</div>
</body>
</html>
| << 前へ | 次へ >> |