デモ
これがデモの例全体です
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 ::">
結果:
それがフィルターの完了方法です。とても簡単ではありませんか?