AngularJSでカスタムfilterを書いてみよう


filter とは

filter は、表示用に値を加工してくれる機能。HTML テンプレートだけでなく、controller や service でも利用できる。また、独自の filter を簡単に定義することもできる。

構文から利用例、そしてカスタム filter のサンプルコードを紹介!

filter の構文

こんなふうに、パイプ記号を使う構文で記述。

1
{{ expression | filter }}

チェーン(chaining)することもできるし、

1
{{ expression | filter1 | filter2 }}

引数を取ることもできる。

1
{{ expression | filter:arg1:arg2 }}

filter の利用例

たとえば数値をカンマ区切りで表示したければ、AngularJS 標準の number filter を使うだけでラクチン。

1
{{ 123456789 | number }}

123,456,789

標準の filter については、AngularJS 公式サイトのほうで。filter filter はかなり使えるので要チェック!

カスタム filter を実装してみる

例として、全角英数字が混じってて見苦しいデータがあったとして、せめて表示の段階ででもスッキリと半角英数字に揃えて表示したいなーということを実現する filter のサンプルコードを。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script>
angular.module('Ninja', [])
.filter('oneByte', function() {
  return function(input) {
    return input.replace(/[A-Za-z0-9]/g, function(s) {
      return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
  };
});
</script>
<div ng-app="Ninja">
  {{ val | oneByte }}<br>
  <input type="text" ng-model="val" ng-init="val='Angularjs Ninja'">
</div>
{{ val | oneByte }}

いやー、filter 楽しい。でも filter はパフォーマンス的にアレなので、使いすぎにご注意を。