AngularJSフィルターフィルター使用例分析

この記事の例では、AngularJS フィルターの使用方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

このセクションでは、angularjs のフィルターを見ていきます。

私たちの開発では、ページ上でユーザーに表示する必要がある情報は、ユーザーに表示する前にフォーマットする必要があります。たとえば、時間のローカライゼーション、または yyyy-MM-dd HH:mm:ss 形式、デジタル精度の書式設定、ローカライゼーション、名前の書式設定などです。 Angularjs にはフィルターと呼ばれるコマンドが用意されており、これを使用して一連の機能を簡単に実行できます。Angularjs には数値などの多くの組み込みフィルターが用意されています。また、独自のフィールド フィルターを簡単にカスタマイズできます。

次の例:

html:

<div ng-app="app" ng-controller="test">
num:<input ng-model="num" />
<br/>
{{num | number}}
<br/>
{{num | number:2}}
<br/>
first name:<input ng-model="person.first"/>
<br/>
last name:<input ng-model="person.last"/>
<br/>
name: {{person | fullname}}
  <br/>
name: {{person | fullname:"- -"}}
    <br/>
name: {{person | fullname:" " | uppercase }}
</div>

js:

function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
  var filterfun = function(person, sep) {
    sep = sep || " ";
    person = person || {};
    person.first = person.first || "";
    person.last = person.last || "";
    return person.first + sep + person.last;
  };
  return filterfun;
});

jsfiddle 効果: http://jsfiddle.net/whitewolf/uCPPK/9/

この例では、最初に数値フィルターの使用を示します。それは angularjs に付属しています。 angularjs フィルターを作成する方法も示します。 angularjs の実装は非常に簡単です。

最後の注意: angularjs フィルターは、PowerShell や他のオペレーティング システムのシェル言語のようなチェーン書き込みを value | filter2 の形式でサポートします。

この記事が AngularJS プログラミングに携わるすべての人に役立つことを願っています。

AngularJS フィルターの使用例分析と関連記事の詳細については、PHP 中国語 Web サイトに注目してください。