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

では、スクリプトを作成しましょう。今回も、script.jsをそのまま修正して使うことにします。下のリスト欄にサンプルを掲載しておきましたので、この通りに記述して下さい。

作成したら実際にアクセスしてみましょう。入力フィールドに１～３の番号を記入すると、その番号のデータが表示されます。データを保管しているdataプロパティの内容を追記すればもっと多くのデータが扱えます。

今回は、moduleメソッドでモジュールを作成したものを変数に代入し、そこからcontrollerメソッドを呼び出すようにしてあります。まぁ、どちらの書き方でもいいのですが、例えばモジュールにいくつもコントローラーを組み込むような場合は、この書き方のほうが便利でしょう。

ここでは、this.dataに配列としてデータを保管しています。これは2次元配列になっていて、ID番号、名前、メールアドレスといった値が保管されています。getDataメソッドでは、。countプロパティに設定されたインデックス番号のデータを取り出してテキストにまとめreturnしています。


今回は、getDataの他に「doAction」というメソッドも用意しておきました。これが、ng-clickで呼び出される処理になります。

ここで行っているのは、引数のnumをcountプロパティに設定する、というだけのものです。これでcountの値が変更されると、テンプレートに{{ctl.getData()}}として埋め込まれている表示が瞬時に更新され、指定のデータに切り替わります。

表示の部分はAngularJSにより自動的に更新されるため、アクションメソッドでは単に「設定を保管している値を書き換える」だけでいいのです。普通のJavaScriptのアクション処理とはだいぶ感じが違うのがわかりますね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

var myapp = angular.module('myapp',[]);
myapp.controller('HeloController',
    function(){
        this.count = 0;
        this.data = [
            [0,'nobody','nodata...'],
            [1,'太郎','taro@yamada'],
            [2,'花子','hanako@flower'],
            [3,'幸子','sachico@happy']
        ];
        this.getData = function(){
            return this.data[this.count][0] + ': ' + 
                this.data[this.count][1] + ', ' + 
                this.data[this.count][2] + '.';
        };
        this.doAction = function(num){
            this.count = num;
        }
    }
);