AngularJSの世界では、フィルターはデータをフォーマットする方法を提供します。 Angularは、多くの組み込みフィルターも提供します。また、カスタムフィルターを作成することも非常に簡単です。
HTMLテンプレートバインディング{{{}}では、|を使用しますフィルターを呼び出す。たとえば、文字列にすべての資本文字を表示してほしい。
{{name |大文字}}もちろん、JavaScriptの$フィルターサービスを使用してフィルターを呼び出し、弦の大文字化を例として使用することもできます。
App.Controller（ 'Democontroller'、['$ Scope'、 '$ filter'、function（$ scope、$ filter）{$ scope.name = $ filter（ 'lowercase'）（ 'ari'）;}））;フィルターにパラメーターを渡す方法は？フィルターの後にパラメーターを配置し、中央にコロンを追加するだけです（渡される複数のパラメーターがある場合は、各パラメーターの後にコロンを追加します）。たとえば、番号フィルターは、数字の数を制限するのに役立ちます。小数点以下の2つの場所を表示する場合は、番号を追加します。
{{123.456789 |番号：2}}フィルターフィルターは、主にデータの配列をフィルタリングし、サブアレイデータを含む新しい配列を返すために使用されます。
たとえば、クライアント側で検索すると、アレイから必要な結果をすばやく除外できます。
このフィルターメソッドは、文字列、オブジェクト、または関数パラメーターを受信して、配列要素を選択/削除します。
詳細に見てみましょう。
1。ビルトインフィルター
1、大文字、小文字サイズの変換
{{"下限文字列" |大文字}} // result：下のキャップストリング{{"タンクは良い" |小文字}} //結果：タンクは良いですver垂直線はパイプライン関数です。 Linuxに精通している場合、この部分のパイプライン関数は基本的に2と同じです、JSONフォーマット
{{foo： "bar"、baz：23} | json}} // result：{"foo"： "bar"、 "baz"：23}注：BZAにはフォーマット前に二重引用符はなく、フォーマット後にJSONデータに変換されます。
3。日付のフォーマット
mysqlタイムスタンプng-bind = "message.time * 1000 | date： 'yyyy-mm-dd'"
{{1304375948024 |日付： 'Medium'}} // 2011年5月3日06:39:08 PM {{1304375948024 |日付}} //結果：2011年5月3日{{1304375948024 |日付： "mm/dd/yyyy @ h：mma"}} // result：05/03/2011 @ 6:39 am {{1304375948024 |日付：「yyyy-mm-dd hh：mm：ss "}} // result：2011-05-03 06:39:084。番号のフォーマット
{{1.234567 |番号：1}} //結果：1.2 {{1234567 |番号}} //結果：1,234,5675。通貨のフォーマット
{{250 |通貨}} //結果：$ 250.00 {{250 |通貨： "rmb ￥"}} //結果：rmb ￥250.006.フィルター検索は、キーではなく値のみを確認できます
{{[{"age"：20、 "id"：10、 "name"： "iPhone"}、{"age"：12、 "id"：11、 "name"： "sunm xing"}、{"age"：44、 "id"：12、 "name"： "test abc"}] | filter： 's'}} //上記の結果の結果を見つけます。 12、 "id"：11、 "name"： "sunm xing"}、{"age"：44、 "id"：12、 "name"： "test abc"}] |フィルター：{'name'： 'ip'}}} //上記の例のような名前の行を見つける例：[{"age"：20、 "id"：10、 "name"： "iPhone"}] $ filter（ 'number'）（30000、2）; var jsonstring = $ filter（ 'json'）（{"age"：12、 "id"：11、 "name"： "sunm xing"}、{"age"：44、 "id"：12、 "name"： "test abc}]））））7。Limitto文字列、オブジェクトインターセプト
{"私はタンクが大好きです" | Limitto：6}} //結果：私は大好きです{{"私はタンクが大好きです" | limitto：-4}} // result：tank {{[{"age"： "age"：20、 "id"：10、 "name"： "iPhone"}、{"age"：12、 "id"：11、 "name"： "sunm xing"}、{"age"：44、 "id"：12、 "：" test abc "} | limitto：1}} // result：[{"age"：20、 "id"：10、 "name"： "iPhone"}]]8。Orderbyオブジェクトソート
{{[{"age"：20、 "id"：10、 "name"： "iPhone"}、{"age"：12、 "id"：11、 "name"： "sunm xing"}、{"age"：44、 "id"：12、 "name"： "test abc"}] | Orderby： 'id'：true}} // root id descending Order {{[{"age"： "age"： "id"：10、 "name"： "iPhone"}、{"age"：12、 "id"：11、 "name"： "sunm xing"}、{"age"：44、 "id"： "test" " Orderby： 'id'}} // sorted {{[{"age"： "age"： "age"： "20、" id "：10、" name "：" iPhone "}、{" age "：12、" id "：11、" name "：" sunm xing "}、{" age "：44、" id "：12、"： "test abc"}] | Orderby：[' - age'、 'name']}}2。カスタムフィルター機能
フィルターのカスタマイズ方法も非常に簡単です。モジュールのフィルター方法を使用して、入力値を受信して処理された結果を返す関数を返します。
app.filter（ 'filter name'、function（）{return function（フィルタリングする必要があるオブジェクト、フィルターパラメーター1、フィルターパラメーター2、...）{//....do処理されたオブジェクトを返します;}}）;基本的なAngularJS MVCフレームワーク、Phonecat、およびカスタムフィルターを見つけましたが、これもこれに基づいて記述されています。このフレームワークは非常に便利です。
filters.jsモジュールを追加します
angular.module（ 'tanktest'、[]）。filter（ 'tankReplace'、function（）{return function（input）{return input.replace（/tank/、 "======"）};}）;HTMLで呼び出されました
{{"タンクは良い" |小文字| tankreplace}} // result：=====は良いです注：|小文字| TankReplaceパイプラインコマンドには複数のパイプラインコマンドがあります
YourApp.Filter（ 'OrderObjectby'、function（）{return function（items、field、Reverse）{var filtered = []; angular.foreach（items、function（item）{filtered.push（item）;}）; filtered.sort（function（a、b）{return（a field]> b [field]？ }）;このフィルターは、オブジェクトを標準配列に変換し、指定したフィールドでソートします。 OrderObjectbyフィルターを使用して、フィールド名の後のブール値を含むOrderbyに似ています。指定された順序で、逆にする必要があります。言い換えれば、偽物は昇順であり、本当の衰退です。 HTMLコール
<li ng-repeat = "アイテムのアイテム| orderobjectby： 'color'：true"> {{item.color}} </li>検索をソートします
<入力タイプ= "text" ng-model = "search" placeholder = "search"> <thead> <tr> < 'id'} "}"> </span> </th> <th ng-click = "ChangeOrder（ 'name'）" {dropup：order === ''} ">製品名<span ng-class =" {ordercolor：ordertype === 'name'} "> </th ng-lick =" ng-lick = "ng-lick ="注文=== ''} ">製品価格<span ng-class =" {ordercolor：=== 'fires} "> </th> </tr> </thead> <ttr ng-repeat =" <td> {{item.name}} </td> <td> {{item.price |通貨： '￥'}} </td> </tr> </tbody>Angularjs
//デフォルトのソートフィールド$ scope.ordertype = 'id'; $ scope.order = ' - '; $ scope.changeorder = function（type）{console.log（type）; $ scope.orderType = type; if（$ scope.order === ''）{$ scope.order = ' - '; } else {$ scope.order = ''; }}