カテゴリー
コンピューター

【AngularJS】自作のカスタムフィルタで true、false を変換して表示するコード

やりたい事

  • true、false を HTML では任意のフォーマットに変換して表示したい。
  • たとえば、true ⇒ ○、false ⇒ ×
  • AngularJS を使いたい。

調べてみますと、フィルタという機能を使えば、たとえば「1」を「$1」と表示形式を指定できるようです。

さらに、自作のフィルタも作ることができるそうですので、やってみました♪

カスタムフィルタのサンプルコード

  • HTML で {{true | boolean:’○’:’×’}} と書いたなら、boolean 部分が今回作った関数に結びつき、呼び出される。
  • return function(boolean, true_format, false_format) { とあり、
    • 引数 boolean に HTML の true が入る。
    • 引数 true_format に HTML の ‘○’ が入る。
    • 引数 false_format に HTML の ‘×’ が入る。

index.html

<!DOCTYPE html>
<html lang="ja" ng-app="customFilterApp">
<head>
  <meta charset="UTF-8">
  <title> Boolean を任意のフォーマットで表示する AngularJS のカスタムフィルターサンプル</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script>
    angular.module('customFilterApp', [])
    /**
     * 要求されたフォーマットに基づいて、Boolean をフォーマットして返却します。
     *
     * @param {boolean} boolean true、またh false
     * @param {string} true_format true のフォーマット後の返却オブジェクト
     * @param {string} false_format false のフォーマット後の返却オブジェクト
     * @returns フォーマットしたオブジェクト。または、引数が Boolean 以外の場合は空文字
     */
    .filter('boolean', function() {
      return function(boolean, trueFormat, falseFormat) {
        var word = '';
        if (boolean === true) {
          word = trueFormat;
        } else if (boolean === false) {
          word = falseFormat;
        }
        return word;
      }
    });
  </script>
</head>
<body>
  <h2>例1. true を '○' に、false を '×' に変換して表示</h2>
  <p>
    <span ng-non-bindable>{{true | boolean:'○':'×'}} → </span>
    <span>{{true | boolean:'○':'×'}}</span>
  </p>
  <p>
    <span ng-non-bindable>{{false | boolean:'○':'×'}} → </span>
    <span>{{false | boolean:'○':'×'}}</span>
  </p>

  <h2>例2. true を '達成!' に、false を '未達成です。ガンバロ!' に変換して表示</h2>
  <h3>例2-1. 正常系</h3>
  <p>
    <span ng-non-bindable>{{true | boolean:'達成!':'未達成です。ガンバロ!'}} → </span>
    <span>{{true | boolean:'達成!':'未達成です。ガンバロ!'}}</span>
  </p>
  <p>
    <span ng-non-bindable>{{false | boolean:'達成!':'未達成です。ガンバロ!'}} → </span>
    <span>{{false | boolean:'達成!':'未達成です。ガンバロ!'}}</span>
  </p>
  <h3>例2-2. 異常系。true、false 以外だと、なにも表示されない</h3>
  <p>
    <span ng-non-bindable>{{aaaaa | boolean:'達成!':'未達成です。ガンバロ!'}} → </span>
    <span>{{aaaaa | boolean:'達成!':'未達成です。ガンバロ!'}}</span>
  </p>
</body>
</html>

サンプルコードを実行した表示結果

AngularJS のカスタムフィルタの表示結果

おわりに

最初、参考書『AngularJSアプリケーション開発ガイド』を頼りに自分の頭だけで考えてプログラミングいたしました。

P44、2.5 フィルタを使ったデータ形式の指定、の部分ですわ。

完成して満足!充実感♪と浸っているときに、ふと検索してみましたら、次のページのように同じことを考え、作った方がいらっしゃいました。車輪の再開発してしまいましたの><。

ですけれども、コードを比較したり、他のカスタムフィルタを見て、大変勉強になりました。ありがとう存じます!

その後、悔しいですので AngularJS のフィルタについて更に勉強して、フォーマット後の文字列も指定できるように書きなおしました。

その際、メソッドコメントの書き方、引数の名前の付け方、変数や return の指定の仕方、などAngularJS のソースが大変参考になりました。

以上です。

コメントを残す