クリックごとに表示を変えてみる。

Level 1｜｜2016/07/04

今回は、「ngMessageFormat」モジュールと、「ng-click」「ng-plurlize」を使い、クリックするごとに、表示する文字列を変化させます。

サンプルコード

angularJSのng-click属性、ng-plurlize属性他を使ったサンプルをご覧ください。
以下、サンプル内のボタンを押すと、ボタン直下のメッセージが変わり、クリックごとに「dynamic.length」「ng-click」の値も変わっていくことを確認できます。

HTMLファイル

1）ngMessageFormatモジュールを読み込みます
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-message-format.min.js"></script>

<div>
    <h1>クリック数を取得して、表示を切替え</h1>
2）ng-click属性
    <button ng-click="myFunc()">クリックするとメッセージが切り替わります</button><br />
3）ng-plurlize属性　
    <span>{{dynamic.length, plural,offset:1
          =0    { {{static.name}} がNiceといっています}
          =1    { {{static.name}} と {{dynamic[0].name}}がNiceといっています}
          =2    { {{static.name}} と {{dynamic[1].name}} 他 #名がNiceといっています}
          =3    { {{static.name}} と {{dynamic[2].name}} 他 #名がNiceといっています}
          =4    { {{static.name}} と {{dynamic[3].name}} 他 #名がNiceといっています}
          other { {{static.name}} と {{dynamic[4].name}} 他 #名がNiceといっています}
        }}
    </span>
</div>

            

HTMLファイル側での流れは、以下の通りです。
1）ngMessageFormatモジュールを読み込みます
2）ボタンタグにng-click属性のクリックイベントを付加します
3）ng-plurlize属性で表示を切り替えます
 
それぞれを詳しく見てきましょう！

1）「ngMessageFormat」モジュールを読み込み

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-message-format.min.js

まず、「ngMessageFormat」モジュールを読み込みます。
「ngMessageFormat」は、単数形/複数形/性別などに応じた文字列を整形するためのものです。

2）ng-click属性

<HTMLtag ng-click="式"></HTMLtag>

ng-click属性は、Javascriptのclickイベントと同じです。
サンプルコードで指定している「myFunc()」は、JS側で設定します。まずng-plurlize属性で設定された値を取得します。その後、クリックごとに取得した値に1を減算します。

3）ng-plurlize属性

{{plural}} ng-plurlize属性

ng-plurlize属性は、単数/複数/性別など整形する型を指定します。
※　v1.4以下ではng-plurlize属性の記述の仕方が違いますので、ご注意ください。
サンプルコードで指定している「plural」は、複数形を意味し、この他に「select」単数形、「gender」性別などを指定できます。
構文が長いので、分割して説明します。

{{count(件数の式), plural（型）, offset:1(count-offset=#)}}

count(件数の式)
件数を表す式を入れます。

$scope.dynamic = [panda, elephant, giraffe, dolphin, shrimp];
            

サンプルでは、JS側で「dynamic」に値を格納し、「length」で値の数を取得しています。サンプルコードでは、5つの値を設定しています。

offset:1(count-offset=#)
offsetは、任意で設定することができます。countで取得した数から、指定した数（サンプルコードでは、1）を減算します。表示するメッセージに関連してきますので、以下コードを読んでいきます。

HTML側
{ {{static.name}} と {{dynamic[0].name}} 他#名}
            

JS側
$scope.dynamic = [panda, elephant, giraffe, dolphin, shrimp];
$scope.static = rabbit;
            

HTML側では、「 {{static.name}} と {{dynamic[0].name}}他#名」とセットしています。
「static」＝固定で表示
「dynamic」=「static」以外の値
上記のように2つの役割が違います。
 
JS側を見ると、
$scope.static=「rabbit」のみ設定（固定）
$scope.dynamic=複数の値をセット
「dynamic」は、JS側で「static」以外の値をセットします。HTML側の「dynamic[0]」の数値の箇所は、JSで指定した値の0番目を取り出すという意味で、サンプルコードだと「panda」が取り出されます。

「他#名」の箇所は、countの値から、offsetで設定した数値を減算して出力します。
サンプルコードの場合、「dynamic」の数は5人となりますが、表示する部分ですでに1人を出力しているので、offsetで「1」を設定すれば、結果は「他4名」となり、数を合わせることができます。

=0    { {{static.name}} がNiceといっています}
=1    { {{static.name}} と {{dynamic[0].name}}がNiceといっています}
=2    { {{static.name}} と {{dynamic[1].name}} 他 #名がNiceといっています}
=3    { {{static.name}} と {{dynamic[2].name}} 他 #名がNiceといっています}
one   { {{static.name}} と {{dynamic[3].name}} 他 #名がNiceといっています}
other { {{static.name}} と {{dynamic[4].name}} 他 #名がNiceといっています}
            

「dynamic.length」はクリックごとに値が変化します。
この値に該当するものを、「=0」「=1」「one」「other」から選択し、メッセージを表示します。
たとえば、値が「1」の場合、「=1」のメッセージを、値が「5」の場合、「other」のメッセージを表示しています。
「one」はoffsetに1を加算した値の場合が該当し、「other」はそれ以上の値の場合に該当します。

JSファイル

// 予め誰がの部分の値を設定
function animal(name) {
  this.name = name;
}
// 値の一覧
var rabbit   = new animal("ウサギ"),
    panda     = new animal("パンダ"),
    elephant = new animal("ぞう"),
    giraffe   = new animal("キリン");
    dolphin   = new animal("イルカ");
    shrimp   = new animal("エビ");

//　ngMessageFormatを利用  
angular.module('myApp', ['ngMessageFormat'])
  .controller('MyController', ['$scope', function($scope) {
// 常に表示させるrabbit以外を設定
      $scope.dynamic = [panda, elephant, giraffe, dolphin, shrimp];
// rabbitは常に表示させる
      $scope.static = rabbit;
// dynamic.lengthから1減算した値をセット
      $scope.myFunc = function() {
        --$scope.dynamic.length;
      };
    }]);

            

まずは、出力する6人の値をnameに格納しておきます。（JS部分なので割愛）

DIコンテナー

DIコンテナーとは、メインのオブジェクトを動かすのに必要なものを、外から取り入れ橋渡しする機能のことです。

angular.module('myApp', ['ngMessageFormat'])

簡単に言うと、上のコードでは、angular.module「myApp」で、「ngMessageFormat」の機能を使うよ！という意味になります。

表示の制御

=1    { {{static.name}} と {{dynamic[0].name}} 他#名}
            

// 常に表示させるrabbit以外を設定
      $scope.dynamic = [panda, elephant, giraffe, dolphin, shrimp];
// rabbitは常に表示させる
      $scope.static = rabbit;
            

表示の1人目を固定するために、staticにrabbitを格納しています。そして、HTMLファイルで{{static.name}}と記述し、固定で「ウサギ」を出力させます。

表示の2人目と他●名を出力するために、dynamicに残りのすべてを記述・格納しています。そして、HTMLファイルで {{dynamic[0].name}}と「他#名」を出力させます。

「dynamic.length」の値をng-clickに渡す

<button ng-click="myFunc()">クリックするとメッセージが切り替わります</button>
            

// dynamic.lengthから1減算した値をセット
$scope.myFunc = function() {
   --$scope.dynamic.length;
};
            

「dynamic.length」の値から、1を減算（演算子「--」）して、ng-click属性に渡しています。以後、クリックするごとに値が、1ずつ減っていきます。

これで、クリックごとに表示の切り替えサンプルができました。
「ng-plurlize」については、バージョンによって書き方が違いますので、詳細はリファレンスなどを参考にしてください。