デモ
これがデモの例全体です
1。filter.jsファイル
Angular.Module（ "ExamPlearpp"、[]）。constant（ "producturl"、 "http：// localhost：/products"）.controller（ "defaultctrl"、function（$ scope、$ http、productsurl）{$ http.get（producturl）.success（function（data）{$ scope; 配列}）;}）;ここでは、導入されたサービスを定数として使用します。これを書くことの利点は、簡単に変更できることです。
$ httpサービスの使用方法については、angularjs（iii）展開を参照してください
<！doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "execplearpp"> <head> <meta http-equiv = "content-type" content = "text/html; src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "styleSheet"/> <link href = "bootstrap.css" rel = "styleSheet"/>> <スクリプトsrc = "filter.js"> </> > <div> <div> <h>製品</h> </div> <table> <thead> <tr> <td> name </td> <td> category </td> <td> frice </td> <td> expiry </td> </tr> </thead> <tbody> <ttr ng-repeat = "アイテム大文字}} </td> <td> {{item.category}} </td> <td> {{item.price |通貨}} </td> <td> {{item.expiry | number}} </td> <td> {{item | json}} </td> </tr> </tbody> </table> </div> </body> </html>実行の結果：
フィルターを使用します
フィルターは2つのカテゴリに分割されます。
1。個々のデータのフィルタリング
2。セットで操作します。
1.データを操作するのは比較的簡単です。デモに示されているように、{{item |通貨}}など
通貨：「F」はポンドにフィルタリングされる価格になります。
単一のデータフィルターは、対応する形式の文字で、フィルターの後にデータ形式をフィルタリングする必要があります。
番号：予約されているデータの小数を表します。
2：コレクションフィルタリング、コレクションの特定の番号をフィルタリングします。
基本的なデモで、これを追加しました：
<div> <h>製品</h> </div> <div>制限：<select ng-model = "limitvalue" ng-options = "p for limitrange"> </select> </div> filter.jsが追加されました：$ http.get（productsurl）。 = ""; // string <span style = "background-color：rgb （、）;"> $ scope.limitrange = []; for（var i =; i <= $ scope.products.length; i ++）{$ scope.limitrange.push（i.tostring（））; } </span> </span>}）; <tr ng-repeat = "製品のアイテム| limitto：limitvalue"> <td> {{item.name |大文字}} </td> <td> {{item.category}} </td> <td> {{item.price |通貨}} </td> <td> {{item.expiry | number}} </td> <td> {{item | json}} </td> </tr> <span style = "line-height：。; font-family：verdana、arial、helvetica、sans-serif; font-size：px; background-color：rgb（、）;"> </span>機能を書くときは、JSONデータが非同期に取得されるため、成功して記述する必要があります。
結果：
制限：ページに表示される数を調整できます。
フィルターを作成します
AngularJSには2つのフィルターがあります。まず、次のような個々のデータをフォーマットするフィルターを作成できます。
最初にフィルターの定義方法について説明しましょう。フィルターはmodule.filterを介して作成され、作成の一般的な形式は次のとおりです。
Angular.module（ "Examplearpp"）//モジュールを取得することを意味します。フィルターはモジュールの下に作成されます。
.filter（ "labelcase"、function（）{// 2つのパラメーターを受信します。最初のパラメーターはフィルターの名前を表し、2番目は工場関数です
return function（value、Reverse）{//ワーカー関数を返して、対応するフィルタリングプロセスをフィルタリングします。最初のパラメーターは、フォーマットする必要があるオブジェクトを示し、2番目のパラメーターは構成と従うべき形式を示します。
if（angular.isstring（value））{var中間=逆？ value.touppercase（）：value.tolowercase（）; return（reverse？intermediate []。tolowercase（）：intermediate []。touppercase（） + beitmediate.substr（）;} else {return value;}}}}}}}}）;これをJSファイルに書きました。 customfilter.js追加することを忘れないでください。
<link href = "bootstrap.css" rel = "stylesheet"/> <scrip src = "filter.js"> </script> <script src = "customfilter.js"> </script>
さて、データを変更します：
<td> {{item.name |ラベルケース：true}} </td>前述のように、構成情報を追加する必要がある場合、ライティング形式はフィルターです：オプション
もちろん、デフォルトのパラメーターを書き込むことはできず、デフォルト値にnullまたは未定義が与えられます。
結果：
各データを処理するためのフィルター関数をカスタマイズするのは簡単です。
2. Limittoと同様に、コレクションによって処理された関数をカスタマイズします。
Angular.Module（ "ExamPlearpp"）。フィルター（ "LabelCase"、function（）{return function（value、reverse）{if（angular.isstring（value））{var intermediate = reverse？value.touppercase（）：value.tolowercase（）;中間.substr（））;} else {return value;}}}}}}}}）。 データ;}}}）;HTML修正部品：
<tr ng-repeat = "製品のアイテム|スキップ：">
結果：合計6個のデータがあり、スキップフィルターを使用して2個のピースが渡されました。
フィルターをカスタマイズすると、フィルターが定義されていることがわかりました。繰り返し定義したくありません。どうすればいいですか？作成したフィルターを使用して作成することもできます。
Angular.Module（ "ExamPlearpp"）。フィルター（ "LabelCase"、function（）{return function（value、reverse）{if（angular.isstring（value））{var intermediate = reverse？value.touppercase（）：value.tolowercase（）;中間.substr（））;} else {return value;}}}}}}}}）。 data;}}}） $フィルター（ "Limitto"）（Skipdata、Takecount）; // Limittoは組み込みフィルターです。$フィルター（ 'Skip'）は、関数を返すため、スキップフィルターを呼び出すため、パラメーターを渡すことができます。
<tr ng-repeat = "製品のアイテム| sake ::">
結果：
それがフィルターの完了方法です。とても簡単ではありませんか？