AngularJSに組み込みのFilterとは別にユーザーが独自にカスタムFilterを定義できる
掲示板の作成からはじめるAngularJSアプリ入門の手引き
Behaviorの使い方では、データの状態に応じて見た目を動的に制御する方法を書いた。本記事はFilter編になる。
組み込みのFilter
AngularJSにはフィルターというコンポーネントがあります。
フィルターを利用することで、Modelのデータをフィルタリングして表示することができます。
ベーシックな例としては、繰り返し処理の中でデータの状態を元にフィルタリングすることが可能です。
<ul ng-repeat="e in items | filter: {tree: false}">
<li>{{e.response}}</li>
</ul>
e.treeのデータがfalseのデータのみをリスト表示する例になります。また、ModelとFilterと連携させることもできます。
<ul ng-repeat="e in items | filter: {tree: false}">
<li>{{e.response}}</li>
<li><label><input type=checkbox ng-model="e.tree" /> 非表示</label></li>
</ul>
フィルターに設定したデータと同じデータをng-modelで設定することで、チェックボックスをオンにすることで、e.treeの値をtrueに変更し、フィルタの効果によりリストから非表示にすることができます。
AngularJSの組み込みフィルタの使い方は公式サイトだと以下のページが参考になります。
https://docs.angularjs.org/api/ng/filter
上の例ではfilterを利用してModelデータの絞り込みを行いましたが、orderByを利用してModelデータを並び替えることができます。
掲示板アプリの回答に付いたレスポンスデータををorderByでフィルタリングします。
<ul class="inline-list" ng-show="e.on" ng-repeat="f in e.tree | orderBy:'response'">
<li>{{f.response}}</li>
</ul>
レスポンスが五十音順に表示されるようになります。
カスタムFilter
掲示板アプリにカスタムFilterを作成し、
- 初期表示ではレスポンスの無い回答だけを表示
- [すべての回答を表示]チェックボックスをオンにすると全回答が表示される
という仕様にしてみたいと思います。
AngularJSの使い方入門編で載せたHTMLで、既に[すべての回答を表示]というチェックボックスは定義してあるのですが、以下のコードが該当します。
<label><input type="checkbox"> すべての回答を表示</label>
上のコードにng-mdelを設定します。
<label><input type="checkbox" ng_model="allAnswer"> すべての回答を表示</label>
カスタムFilterを設定するリストには以下のようにフィルターを設定します。
<ul class="inline-list" ng-repeat="e in thread.answers | customListing:allAnswer">
customListingというカスタムFilterで、初期表示の際はレスポンスの無い回答のみを表示し、チェックボックスをオンにすることですべての回答を表示するようにします。
customListingは、Filter methodとして以下のように定義します。
var bbsApp = angular.module("bbsApp", []);
bbsApp.filter("customListing", function () {
return function (answers, allAnswer) {
var result = [];
angular.forEach(answers, function (e) {
if (e.tree == false || allAnswer == true) {
result.push(e);
}
});
return result;
}
});
allAnswer(チェックボックスがオン)がtrueの場合は、全回答をreturnし、オフの場合はe.treeがfalseの回答だけをreturnするfilterが上のコードになります。
チェックボックスのng-modelにallAnswerを設定することで、FilterとModelが連携して動作している点を確認できるかと思います。
AngularJS組み込みフィルタや独自に定義したカスタムフィルタを活用すれば、behaviorのようにModelデータを変更することなく、View上でデータを調整した状態で見せることが出来ます。次はAjaxの使い方です。
AngularJS使い方ガイド記事一覧