株式会社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-‘をつけてます。

        <body data-ng-app>
    

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

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

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

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

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

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

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

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