Ruby on RailsでWebサイト公開！に挑戦中

前回までで条件を入力してGoogleチャートで作図できるようになりました。今回から、ある一つの条件を変化させたグラフを重ねて表示し、二つのグラフを比較できる機能を追加しようと思います。

まず今回は一つ目のグラフに対し、ある一つの条件のみ変化させて入力する部分を作成しました。

Selectボックスで着目する条件を選択できるようにし、選択した項目のみ設定値を入力するInput要素を表示し、それ以外は非表示にします。

１）AngularJSスクリプト

①Selectボックスのオプション値を定義

$scope.hikakus = ['駅名', 'サイズ', '築年数',・・];

②各input要素の初期値を定義

$scope.cond = {
                hikaku: $scope.hikakus[0],
                eki_h: $scope.ekis[0],
                size1_h: $scope.sizes[0],
                size2_h: $scope.sizes[26],
                build1_h: $scope.builds[0],
                build2_h: $scope.builds[26],
　　　　　　　　　：
              };

２）ビューでSelectボックス、Input要素記述

・"比較項目"のSelectボックスを表示し、ここで選択した項目をwatchメソッドで監視し、ng-ifで表示、非表示を切り替えます。

<div class="form-group">
  <label class="col-sm-2 control-label">比較項目</label>
  <div class="col-sm-8">
    <select class="form-control" ng-model="cond.hikaku"
          ng-options="t for t in hikakus">
    </select>
  </div>
</div>
<div class="form-group" ng-if="visible_eki">
  <label class="col-sm-2 control-label">駅名</label>
  <div class="col-sm-8">
    <select class="form-control" ng-model="cond.eki_h"
          ng-options="t.name for t in ekis">
    </select>
  </div>
</div>
<div class="form-group" ng-if="visible_size">
  <label class="col-sm-2 control-label">サイズ(m2)</label>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.size1_h"
          ng-options="t.name for t in sizes">
    </select>
  </div>
  <div class="col-sm-1 text-center">～</div>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.size2_h"
          ng-options="t.name for t in sizes">
    </select>
  </div>
</div>
<div class="form-group"  ng-if="visible_build">
  <label class="col-sm-2 control-label">築年数(年)</label>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.build1_h"
          ng-options="t.name for t in builds">
    </select>
  </div>
  <div class="col-sm-1 text-center">～</div>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.build2_h"
          ng-options="t.name for t in builds">
    </select>
  </div>
</div>

３）AngularJSスクリプトのwatchメソッドで、Selectボックスの入力値を監視し、表示・非表示を切り替え

$scope.$watch('cond.hikaku', function() {
  switch ($scope.cond.hikaku){
    case '駅名':
      $scope.visible_eki = true;
      $scope.visible_size = false;
      $scope.visible_build = false;
      break;
    case 'サイズ':
      $scope.visible_eki = false;
      $scope.visible_size = true;
      $scope.visible_build = false;
      break;
    case '築年数':
      $scope.visible_eki = false;
      $scope.visible_size = false;
      $scope.visible_build = true;
      break;
  }
},true);