angleJSのフィルター（フィルター）
Mục lục
angleJSにおけるフィルターの概念と役割
純粋なJavaScriptを使用する場合、データを操作するときに、実際の例を示すために、かなり複雑な永続データ型を変換する必要がある場合があります。データ型番号（ float） 、通貨形式で画面に印刷する場合は、次の手順を順番に実行する必要があります。
- データ型を文字列に変換し、
- 文字列の後に$記号を追加して、文字列を連結します
- HTMLコンテンツ内に文字列を出力します（innerTextプロパティを介して）
- データが更新されたら、上記の手順を順番に繰り返します
angleJsを使用すると、これらのタスクを短縮するためにモデルをサポートするフィルターメカニズムがあります。モデルはデータ型を変換する必要はありません。フィルターは、データをフィルター処理し、必要に応じて結果を出力します。一言で言えば、フィルターはエンドユーザーに提示されたときにデータを再フォーマットします
angleJSでフィルターを使用するための構文：
{{expression | filter}}フィルタは、「|」文字を介して式に挿入されます。 、続いてフィルター
フィルタは、次のように連続したリンクとして接続できます。
{{expression | filter | filter}}この場合、最初のフィルターを使用して式をフィルター処理し、2番目のフィルターは引き続き最初のフィルターの値をフィルター処理します。
注：フィルターは変数の実際の値を変更せず、エンドユーザーの表示形式のみを変更します。
angleJSの組み込みフィルターのリスト
angleJSで人気のある組み込みフィルターのいくつか：
- 通貨
- 日にち
- 小文字
- 大文字
- 探す
- ..。
通貨フィルター
式の通貨をフォーマットするために使用されます。これは、通貨フォーマットでユーザーに表示されます。
ドキュメント： https ：//docs.angularjs.org/api/ng/filter/currency
デフォルトでは、の後に2つの数字が付いたUSDドルの形式が使用されます。以下の例では、フィルターを使用するいくつかの方法について説明します。htmlテンプレートレイヤーとスクリプトレイヤーでは、htmlレイヤーの下のフィルターまたはjavascriptレイヤーのフィルターを使用できますが、htmlレイヤーの方法がより一般的です。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | currency:'$ '}} <br/> {{price | currency: '$ ' : 0}} <br/> {{price2 | currency:'VND '}} <br/> <input type="number" ng-model="price3" /> <br/> {{changeprice()}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope,$filter) => { $scope.price = 1000; $scope.price2 = 2000; $scope.price3 = 4000; $scope.changeprice = function(){ bind_model = $filter('currency')($scope.price3, '$ ', 5); return bind_model; } }); </script> </html>ブラウザに印刷したときの結果：
ただし、私の観点では、私の国の通貨が表示されているため、このフィルターはVNDを満たしていませんが、VNDは数値の右側にあるため、このフィルターは応答しません。もちろん解決策はありますが、独自のカスタムフィルターを定義できます
日付フィルター
ドキュメント： https ：//docs.angularjs.org/api/ng/filter/date
日付フィルターを使用すると、データをインターフェイスに表示するときに必要な意図に従って、すべての日付データを表すことができます。
日付フィルターをよりよく理解するために、以下の例を検討してください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Date filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{date | date:'dd/MM/yyyy'}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope) => { $scope.date = Date.now(); console.log($scope.date); }); </script> </html>ブラウザに印刷したときの結果：
ご覧のとおり、JavaScriptレイヤーデータはUNIXタイムスタンプに従ってコードを記述している現在の時刻を表すタイムスタンプですが、インターフェースを印刷するときは、angularJSのフィルターメカニズムのおかげで、日付値を印刷しました。読み取り可能な年。
それだけでなく、フィルター日付には、さまざまな形式を実行するのに役立つ多くのオプションがあります。詳細については、ドキュメントをお読みください。
小文字と大文字
このフィルターは、データをフィルター処理し、小文字または大文字の文字列に再フォーマットするために使用されます
{{expression | lowercase}} {{expression | uppercase}}検索フィルター
フィルタはリスト内のデータを見つけるために使用されます。これは非常に便利です。問題をよりよく理解するには、以下の例を参照してください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <input type="text" ng-model="search" placeholder="Search"> <table> <tr ng-repeat="x in listUser | filter:search"> <td> {{x.name}} </td> <td> {{x.age}} </td> </tr> </table> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', ($scope) => { $scope.listUser = [ { name: "toan", age: 20 }, { name: "huy", age: 21 }, { name: "hieu", age: 22 }, { name: "toan", age: 34 }, ]; }); </script> </html>ブラウザに印刷するときのインターフェース
カスタムフィルター（自己定義フィルター）
組み込みのフィルターを使用するのに十分でない場合は、必要に応じてフィルターするカスタムディレクティブを完全に定義できます。カスタムフィルターを初期化する構文：
app.filter('filtername',function(){});以下の例では、通貨形式VNDに使用されるフィルターを使用してフィルターを作成します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | vndFilter}} </div> </body> <script> var app = angular.module('myApp', []); app.filter('vndFilter', function () { return function (x) { x = x.toString().replace(/B(?=(d{3})+(?!d))/g, ','); // convert float to string decimal thousand separator x += ' VND'; // concat with VND return x; }; }) app.controller('myController', function ($scope) { $scope.price = 5000000; }); </script> </html>ブラウザに表示されたときの結果
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
