検索
連載

AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本：MEANスタックで始めるWebアプリ開発入門（10）（2/3 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく本連載。今回は、AngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ（カスタムディレクティブ）の作成について解説。

[中村修太，クラスメソッド] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 次のページへ

filterと「｜」によるチェイン

　ここで解説するfilterは、リストなどの配列データを絞り込むときに使用する、使用頻度の高いフィルタです。

　下記のように「filter : '検索する文字列'」と定義することで、リストに対して対象文字列を使った絞り込みを行います。第2引数にはBOOL値か関数を指定することができ、BOOL値がtrueであれば文字列完全一致の検索、falseであれば文字列部分一致での検索を実行します。

　また、第2引数に関数を指定した場合には、絞り込みのロジックを自分で実装することが可能です。

filter:<検索文字列> [true | false | 関数]

　では、filterを使って絞り込みを行ってみましょう。下記サンプルではuserListにユーザーの配列データを格納し、テキストで入力した値で名前のフィルタリングを行います。

・
・
<script>
    var myApp = angular.module('mySimpleApp', []);
    myApp.controller('myController',function ($scope) {
        $scope.price = 1000;
        $scope.dt = new Date();
        $scope.userList = [
            {name:"taro"},{name:"hanako"},{name:"mike"},{name:"john"},
            {name:"kenji"},{name:"bob"},{name:"syuta"},{name:"alice"}
        ];
    });
</script>
 
<body ng-controller="myController">
 
<input type="text" ng-model="mysearch">
<ul>
    <li ng-repeat="user in userList | filter:mysearch">{{ user.name }}</li>
</ul>
 
</body>
</html>

　ng-repertでuserListの要素をuserにバインドし、そのデータに対してfilterを適用して入力された値でuserListのnameに対して絞り込みを行っています。

　実際にテキストに値を入力すると、その値でフィルタリングされているのが分かります。また、filterでは「 | 」（パイプ）を複数つなげることが可能です。例えばliタグを下記のように記述すれば、フィルタリングした値をソートして表示します。

    <li ng-repeat="user in userList | 
            filter:mysearch | orderBy : 'name'">{{ user.name }}</li>

　以上のように、フィルタにはcurrencyのように単一の値に対して動作するものと、orderByのように配列に対して動作するものがあります。

カスタムフィルタの作り方

　AngularJSのフィルタは、ビルトインのものだけではなく、独自のフィルタを定義することが可能です。フィルタを定義するためには、angular.Moduleのfilterメソッドを使用します。

angular.Module.filter(<フィルタ名>,<フィルタ関数生成用関数>);

　第1引数にフィルタ名を指定し、第2引数に「フィルタ関数を生成する関数」を指定します。

　では、シンプルなフィルタ関数を定義してみましょう。下記サンプルで自作したmyFilterフィルタでは、入力された値が偶数か奇数であれば、その文字列を追加して返します。

・
・
<script>
    var myApp = angular.module('mySimpleApp', []);
    myApp.controller('myController', function ($scope) {
    }).filter('myFilter', function () {
        return function (input) {
            if (!input || isNaN(input)) {
                return input;
            }
            console.log(input % 2);
            if (input % 2 === 0) {
                return input + " (偶数) ";
            } else {
                return input + " (奇数) ";
            }
        };
    });
</script>
 
<body ng-controller="myController">
<input type="text" ng-model="myValue">
　<p>myFilterフィルタ適用 (fullDate) : {{myValue | myFilter }}</p>
</body>
</html>

　filter関数に渡している無名関数はフィルタ関数を返す関数です。この関数がフィルタ関数であり、input引数の値に応じて結果を加工して返します。

　なお、受け取った引数の型や値が想定するものと違った場合には、そのまま値を返すのが推奨されているようです。

Controller内でフィルタを使う

　先ほどはフィルタをエクスプレッション構文で使用しましたが、ControllerやService内でフィルタを使うことも可能です。

　先ほどのmyFilterをController内で使用するには、下記のようにします。

myApp.controller('myController', ['$scope', '$filter',
    function ($scope, $filter) {
        $scope.init = function() {
        	//myFilterを呼び出し
            console.log($filter('myFilter')(10));
        };
    }
]);

　controllerで$filterをDI（Dependency injection：依存性の注入）し、$filterオブジェクトでフィルタ名を指定して、対象のフィルタを実行しています。

　このように、ControllerやServiceの中でも$filterオブジェクトを通してフィルタを実行できます。また$filterでは、ビルトインのフィルタを呼び出すこともでき、複数のフィルタをまとめた独自のフィルタを定義することも可能なので必要に応じてフィルタを自分で定義しましょう。

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 次のページへ
ページトップに戻る