AngularJS_AngularJS のカスタム フィルターの詳細な説明

フィルターはその名のとおり、入力を受け取り、それを一定の規則に従って処理し、処理された結果を返すものです。これは主に、配列のサブセットの取得、配列内の要素の並べ替えなど、データの書式設定に使用されます。 ng にはいくつかの組み込みフィルターがあります。それらは次のとおりです:currency (通貨)、date (日付)、filter (部分文字列一致)、json (フォーマットされた JSON オブジェクト)、limitTo (制限数値)、小文字 (小文字)、大文字 (大文字) 、number (数値)、orderBy (並べ替え)。全部で9種類。さらに、フィルターをカスタマイズすることもできます。これは強力で、あらゆるデータ処理要件を満たすことができます。

AngularJS はいくつかの組み込みフィルターを提供します。カスタム フィルターのシナリオをいくつか示します。

パラメーターなしのカスタムフィルター

//过滤 不带参数
app.filter('ordinal', function () {
return function (number) {
if (isNaN(number) || number < 1) {
return number;
} else {
var lastDigit = number % 10;
if (lastDigit === 1) {
return number + 'st'
} else if (lastDigit === 2) {
return number + 'nd'
} else if (lastDigit === 3) {
return number + 'rd'
} else if (lastDigit > 3) {
return number + 'th'
}
}
}
});

大まかに次のように使用されます:

{{777 | 序数}}

パラメータによるフィルタリング

特定の位置にある文字を大文字に変換します。

//过滤 带参数
app.filter('capitalize', function () {
//input 需要过滤的元素
//char位置，索引减一
return function (input, char) {
if (isNaN(input)) {
//如果序号位置没有设置，索引位置默认是0
var char = char - 1 || 0;
//把过滤元素索引位置上的字母转换成大写
var letter = input.charAt(char).toUpperCase();
var out = [];
for (var i = 0; i < input.length; i++) {
if (i == char) {
out.push(letter);
} else {
out.push(input[i]);
}
}
return out.join('');
} else {
return input;
}
}
}); 

大まかに次のように使用されます:

{{'7' | 大文字:3}}

フィルターコレクション

特定の条件を満たすコレクション内の要素をフィルターで除外します。

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.languages = [
{name: 'C#', type: 'static'},
{name: 'PHP', type: 'dynamic'},
{name: 'Go', type: 'static'},
{name: 'JavaScript', type: 'dynamic'},
{name: 'Rust', type: 'static'}
];
});
//过滤集合
app.filter('staticLanguage', function () {
return function (input) {
var out = [];
angular.forEach(input, function (language) {
if (language.type === 'static') {
out.push(language);
}
});
return out;
}
}); 

大まかに次のように使用されます:

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>

フィルタリング、複数のパラメータの取得、複数の処理

数値の表示単位と表示位置を定義します。

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.digit = 29.88;
});
//过滤 做多件事 多个参赛
app.filter('customCurrency', function () {
return function (input, symbol, place) {
if (isNaN(input)) {
return input;
} else {
//检查symbol是否有实参
var symbol = symbol || '￥';
var place = place === undefined ? true : place;
if(place===true){
return symbol+input;
}else{
return input + symbol;
}
}
}
}); 

大まかに次のように使用されます:

<p><strong>Original:</strong></p>
<ul><li>{{digit}}</li></ul>
<p><strong>Custom Currency Filter</strong></p>
<ul>
<li>{{digit | customCurrency}} --Default</li>
<li>{{digit | customCurrency:'元'}} --custom symbol</li>
<li>{{digit | customCurrency:'元':false}} -- custom symbol and custom location</li>
</ul>

フィルターを使用する 2 つの方法

1. テンプレートでフィルター

を使用します。

{{}} でフィルターを直接使用し、その後に | を使用して式を区切ることができます。

{{ expression | filter }}

複数のフィルターを一緒に使用することもできます。前のフィルターの出力は次のフィルターの入力として使用されます (この製品がパイプのように見えるのも不思議ではありません...)

{{ expression | filter1 | filter2 | ... }}

フィルターはパラメーターを受け取ることができ、パラメーターは次のように : で分割されます。

{{ expression | filter:argument1:argument2:... }}

{{}} でデータをフォーマットすることに加えて、命令でフィルターを使用することもできます。たとえば、最初に配列をフィルターしてから出力をループします。

<span ng-repeat="a in array | filter ">

2. コントローラーとサービスでフィルターを使用する

フィルターは、おなじみの依存関係挿入を通じて JS コードでも使用できます。たとえば、コントローラーで通貨フィルターを使用したい場合は、コードをコントローラーに挿入するだけです。

app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534); 
}

テンプレートで {{num}} を使用すると、$123,534.00 を直接出力できます!サービスでのフィルターの使用についても同様です。

この時点で、コントローラーで複数のフィルターを使用したい場合、それらを 1 つずつ挿入する必要があるのではないかと疑問に思うかもしれません。弟よ、心配しないでください。必要なフィルターを呼び出すための $filter サービスが提供されています。使用方法は次のとおりです。

app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date()); 
}

同様の効果が得られます。利点は、さまざまなフィルターを便利に使用できることです。