④検査結果表示について6

今回はメイン画面にて過去の検査結果が閲覧できるような処理を行う。

想定しているような処理は、図1の様な既にサンプルアプリに存在しているグラフ描画画面の年号選択の様なものである。検査日付を選択したら、対応したデータの表示を行いたい。

図1 グラフ画面での年号選択コンボボックス

以下は、サンプルアプリでどのように年の選択を行っているかを抜き出したものである。ビュー（HTML）とコントローラ（CountryController）の関係する部分を抜粋した。

HTML

<ons-list class="year-select-container">
   <ons-list-item>
     <select
       ng-model="country.year"
       ng-options="year for year in country.years"
       class="text-input text-input--transparent"
       style="width: 100%; margin-top: 4px">
     </select>
   </ons-list-item>
 </ons-list>

これがhtmlの記述である。4行目、および5行目を書き換えれば応用が出来そうにみえる。
次に、「country.year」が何かを確認していく。

JS

this.years = [];
  for (var i = 1950; i <= 2100; i++) {
    this.years.push('' + i);
  }

 $scope.$watch('country.year', function() {
    that.getPopulation();
  });

上記のコードはCountryController内で記述されており、なお関係があるものだけを
抜粋したものである。
行目の$scope.$watch～は指定された値を監視し、その値が変化したら処理getPopulation()を行うといったものである。
これらの処理を行う事でコンボボックスの作成を行う事が出来ることが分かったところで、我々のアプリケーションの改造へ移る。まずは検査日付の選択が行えるコンボボックスの作成を試みる。

HTML

<ons-list class="year-select-container">
            <ons-list-item>
              <select
                ng-model="countries.sampleDate"
                ng-options="sampleDate for sampleDate in countries.sampleDateList"
                class="text-input text-input--transparent"
                style="width: 100%; margin-top: 4px">
              </select>
            </ons-list-item>
          </ons-list>

上記HTMLはmain.html内に記述する。
検査日は「sampleDate」として定義されているため、ng-model,ng-optionsをそれぞれ置き換える。なお、ng-modelに指定した'countries.sampleDate'はコンボボックスにつけた変数名のようなもので、ng-optionsに指定した'countries.sampleDateList'は検査日のリストが格納されている。

JS

that.sampleDateList = [];
Countries.get()
    .then(
      function(countries) {
        countries.list.forEach(function(element){
          that.sampleDateList.push(element.sampleDate);
        });
        that.sampleDate=that.sampleDateList[0];        
        // 直近の検査日の検査結果を変数 list に格納
        that.list = countries.list;

        var list = countries.list[0];
        that.createGroup(list);
    }
);
$scope.$watch('countries.sampleDate', function() {
    //that.listからthat.list[i].sampleDate = that.sampleDateとなるthat.list[i]を取り出してthat.createGroupを呼び出す
});

これは、CountriesController内で記述を行う。まず、1行目でsampleDateListの配列を空にする。
5~7行目ではsampleDateListに検査リストに含まれている検査日の流し込みを行っている。
また、これをアラートすると、以下の図2の様になり、抽出出来ていることが分かる。

図2 sampleDateListをアラートした図

8行目は、デフォルト値の設定である。この代入をしない場合、起動直後の状態だとコンボボックスが空欄になってしまう為、こちらを参考にしそれを防止した。
10行目の定義は、OpenDolphinから取得した検査データ一覧をメモリーに保存するといった処理である。
13行目は以前のブログで記述したグルーピング処理を関数化したcreateGroupの呼び出しである。
16行目からはSampleDateの監視を行うような処理であるが、まだ未完成である。
これらの修正を行い、アプリを確認すると、以下の図3の様にコンボボックスの作成を行う事が出来た。

図3 メイン画面での日付選択のコンボボックス

次回は17行目のコメントにも書いてあるような処理の記述を行い、過去の検査結果の表示を行いたい。

【Tips】

コントローラ内で定義したプロパティ（this.sampleDateなどthis.が付いたもの）は、ビュー（HTML）内ではコントローラへの参照オブジェクト（countriesなど）のプロパティとして参照できる（countries.sampleDate）。
ビュー内でこのプロパティが変更されるとコントローラ内のプロパティも変更され、逆にコントローラ内で設定したプロパティの値はビューへ反映される。
これと同じように、コントローラ内で定義したメソッド（this.createGroup = function(list){...}）も、ビューから呼び出せるのだろうか？
普通の関数とコントローラのメソッドの違いは何だろうか？
$scope$watchはコントローラのプロパティを監視し、その値が変更されたときに指定した処理を実行する命令である。これを使ってモデル（HTML）とコントローラの間で連携を実現している。いわゆる.onChangeなどのイベントリスナーと等価なものであろう。
ただし、$scope$watchを使うのがAngularJSの流儀なのかもしれない。