AngularJSにはフィルタという便利な機能があります。
チュートリアルの3で解説されています。
http://docs.angularjs.org/tutorial/step_03
動作するデモもあります。
http://angular.github.io/angular-phonecat/step-3/app
試してみたことない人はぜひどうぞ。
さて、このフィルタですが、およそ次のように使います。
<input ng-model="query">
<ul>
<li ng-repeat="item in items | filter:query">
{{item.title}}
</li>
</ul>この場合、queryが空の場合は全件が出力され、queryを入力し始めると件数が絞られていきます。 これを、queryが空の場合は全件ではなく例えば、10件にしたいと思いました。
AngularJSにはlimitToというフィルタもありますので、それを使うことでできました。
<li ng-repeat="item in items | filter:query | limitTo:limit">のように変更します。 さて、このlimit変数はどうしましょう。 あまりうまい方法は思いつかなかったのですが、JSで次のようにしました。
$scope.updateLimit = function() {
if(query.length) {
limit = 99999;
} else {
limit = 10;
}
};
$scope.updateLimit();さらに、HTML側を次のようにします。
<input ng-model="query" ng-change="updateLimit()">これでqueryが空の場合はlimitが10になります。そうでない場合は99999にすることで全件表示しようとしてますが、当然この数字より大きい配列がきたら切れてしまいます。nullとかNaNとか指定できないのかと思いましたが、angular.jsのソースを読んでもそんな例外扱いはありませんでした。 フィルタを条件付にできないのかとも思いましたが、ドキュメントを読む限りでは分かりません。
とりあえず、これでよしとします。トップ10件にする場合は、limitを呼び出す前に並び替えればよいでしょう。
<li ng-repeat="item in items | filter:query | orderBy:orderFunc | limitTo:limit">それで、同じようにorderFuncを条件に応じて変更するということです。まあ、ここまでするくらいならカスタムフィルタを書いたほうが早いかもしれませんね。
おまけ。
filterやorderByやlimitToなどのことを総称して「フィルタ」と呼ぶのですが、filterも「フィルタ」です。正確には「フィルタのフィルタ」でしょうか。ややこしい。
コメント