libro
www.tuyano.com
初心者のためのAngularJS入門

モジュールとコントローラー (5/6)

作成:2015-12-12 09:50
更新:2015-12-12 09:50

■超簡易データベースを作る

では、今度はデータを扱ったサンプルを考えてみましょう。コントローラーの中に配列としてデータを保管しておき、それを取り出し表示するようなものです。まぁ、超簡易データベース的な使い方をする場合の例ですね。

まず、HTMLファイルを修正しましょう。下にサンプルコードを掲載しておきました。このように修正し保存して下さい。

ここでは、3箇所にAngularJSの機能が使われています。簡単に整理しておきましょう。


●myappモジュールの設定
<body ng-app="myapp" ng-init="num = 0">
まず、<body>にmyappモジュールを設定します。そしてnumという変数を初期化しておきます。これで<body>内でmyappモジュールの機能が使えるようになりました。


●numの設定
<input type="text" ng-model="num">
用意した変数numは、ここで使っています。入力フィールドの値を管理するモデルとしてnumを設定しておきます。これで、入力された値がnumに常に保管されるようになりました。


●getDataでデータを表示する
<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>
※関連コンテンツ

「初心者のためのAngularJS入門」に戻る