株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

Angular.js アンケートページの説明♪

2014.3.30

CATEGORY - web

Angular.js

前回、概要を書かせていただいた、Angular.jsのアンケートページの説明を今回は書こうと思います。


【Angular.js アンケートページサンプル】

Angular.js の基本部分

とりあえずは、Angular.js のページからAngular.jsをダウンロードしておきましょう。
※CDNで読み出してもいいです。今回のサンプルはCDNで呼び出してます。


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

次に、使うタグの部分(※全体で使うなら、でもいいですし、でもいいです。)に‘ng-app’をつけます。これで、中でangular.jsを使えますよ〜♪ってことになります。

バリデータでエラーになるのが気になる人は、ここで、‘data-‘をつけて独自データ属性にしちゃってもいいです。サンプルページでは、すべてに’data-‘をつけてます。

フォームの <input> タグで、ユーザーの入力値をリアルタイムで使いたい場合には、‘ng-model’を設定します。


<input name="jimin" type="number" value="" data-ng-model="scoreJimin" />

例えば、こんな感じです。自民党の支持率を入力させる部分なので、名前は、scoreJimin にしました。

リアルタイムで入力値を表示する

では、次にユーザーが入力した値をリアルタイムで表示する関数を書いてみます。

関数を使うには、関数を使う範囲のタグに‘ng-controller’で関数名を指定します。


<div data-ng-controller="mainControll"></div>

mainControll という関数を作ります。


function mainControll($scope){
    // それぞれのパーセンテージの値を初期化する
    $scope.scoreJimin = 0;
    $scope.scoreMinsyu = 0;
    $scope.scoreIsin = 0;
    $scope.getMessage = '';

    //合計パーセンテージを計算する関数
    $scope.getAmount = function(){
        return  $scope.scoreJimin + $scope.scoreMinsyu + $scope.scoreIsin;
    }

    //合計値によってメッセージを出し分け
    $scope.$watch("getAmount()", function(newValue, oldValue){
      if($scope.getAmount() > 100){
        $scope.getMessage = "※合計値が100%を超えました。ちょうど100%になるように設定してください。";
      }else if($scope.getAmount() < 100){
        $scope.getMessage = "※ちょうど100%になるように設定してください。";
      }else if($scope.getAmount() == 100){
          $scope.getMessage = "適正数値です♪";
      }
    });
}

$scope を引数にとります。 これで、JSの関数の値が、HTML内の’ng-‘属性の値を参照できるようになります。

例えば、
$scope.scoreJimin <ー ’ng-controller=”mainControll”‘内の’ng-model=”scoreJimin”‘を参照してるという意味です。

【合計値を計算する関数】


$scope.getAmount = function(){
    return  $scope.scoreJimin + $scope.scoreMinsyu + $scope.scoreIsin;
}

それぞれの入力値を合計して、返してます。

【合計値によって、メッセージを出す】


$scope.$watch("getAmount()", function(newValue, oldValue){
    if($scope.getAmount() > 100){
        $scope.getMessage = "※合計値が100%を超えました。ちょうど100%になるように設定してください。";
    }else if($scope.getAmount() < 100){
        $scope.getMessage = "※ちょうど100%になるように設定してください。";
    }else if($scope.getAmount() == 100){
        $scope.getMessage = "適正数値です♪";
    }
});

$watch というのが、監視するという意味のangularがデフォルトで持っている関数です。
第1引数には、監視するものを書きます。
今回は、合計値を出す ‘getAmount()’という関数を監視しるので、第1引数にこれを書きます。

第2引数には、監視するごとに動かす関数を書きます。
‘function(newValue, oldValue)’ は、監視している値の 新しい値と古い値を比べていることになります。

で、その関数の中身は、合計値の値によって、メッセージを出し分けています。

このメッセージをHTML内で表示するには、


<p>{{getMessage}}</p>

こう書くことで、この部分に、’$scope.getMessage’の値が表示されます。

これで、リアルタイムで合計値とメッセージを表示するページの完成です♪

アンケートとか、管理ツールとか、フォーム部分なんかでは重宝しそうですね。

いろいろ試してみるとおもしろいかもしれないangular.js でした♪

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP