AngularJSフィルター
パイプ文字(|)を使用して、フィルターを式とディレクティブに追加できます。
AngularJSフィルター
AngularJSフィルターは、データを変換するために使用できます。
| フィルター | 説明する |
|---|---|
| 通貨 | 通貨形式へのフォーマット番号。 |
| フィルター | 配列アイテムからサブセットを選択します。 |
| 小文字 | フォーマット文字列は小文字です。 |
| Orderby | 式に従って配列を配置します。 |
| 大文字 | フォーマットされた文字列は大文字です。 |
式にフィルターを追加します
フィルターは、パイプ文字(|)とフィルターを介して式に追加できます。 。
((次の2つの例では、前の章に記載されている人物を使用します))
大文字のフィルターは、文字列を大文字にフォーマットします。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "personctrl"> <p>名前は{{lastName |大文字}} </p> </div> <script src = "personcontroller.js"> </script> </body> </html>実行結果:
名前の名前
小文字フィルターは、文字列を小文字にフォーマットします。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "personctrl"> <p>名前は{{lastName |低価格実行結果:
名前が付けられました
通貨フィルター
通貨フィルターは、数値を通貨形式にフォーマットします。
AngularJSインスタンス
<!Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app ">" ">" <入力型= "number" ng-model = "数量">価格:<input type = "number" ng-model = "rice"> <p>合計価格= {(QUANTY *価格)|通貨}} </p> </div> <script> var app = angular.module( 'myapp'、[]); app.controller( 'costctrl'、function($ scope.quantity = 1; $ scope.price.price = 9.99;});実行結果:
量:価格:
合計価格= $ 9.99
ディレクティブにフィルターを追加します
フィルターは、パイプ文字(|)とフィルターを介してディレクティブに追加できます。
Orderbyフィルターは、式に従って配列を配置します。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "namesctrl"> <p>ループオブジェクト:</p> <ul> <li ng-repeat = "x in names | orderby: 'country'"> {{x.name + '、' + x.country}}} </li> </ul> </div> <scritc = "実行結果:
ループオブジェクト:
入力をフィルター
入力フィルターは、パイプ文字(|)とフィルターに続いてコロンとモデル名によってディレクティブに追加できます。
フィルターフィルターは、配列からサブセットを選択します。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "namesctrl"> <p>入力フィルタリング:</p> <p> <入力タイプ= "text" ng-model = "test"> </p> <ul> <li ng-repeat = "x in names |フィルター:テスト|注文| '国"> {(x.name | upppercase) +' </li> </ul> </div> <script src = "namescontroller.js"> </script> </body> </html>ランニング効果:
入力フィルタリング:
上記は、AngularJSフィルターに関する知識の要約です。後で追加し続けます。それを必要とする友達はそれを参照できます。