このステップでは、独自のディスプレイフィルターを作成する方法を学びます。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ9
次に、モバイル詳細ページに移動します。前のステップでは、電話の詳細ページに「真」または「偽」が表示され、電話に特定の機能があるかどうかを示します。次に、カスタムフィルターを使用して、これらのテキスト文字列をグラフ化します。 ×「false」として。フィルターコードがどのように見えるか見てみましょう。
ステップ8とステップ9の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
カスタムフィルター
新しいフィルターを作成するには、最初にPhonecatfiltersモジュールを作成し、このモジュールでカスタマイズされたフィルターを登録します。
APP/JS/FILTERS.JS
angular.module（ 'phonecatfilters'、[]）。filter（ 'checkmark'、function（）{return function（input）{return input？ '/u2713'： '/u2718';};}）;私たちのフィルターの名前はCheckMarkです。その入力はtrueまたはfalseのいずれかであり、Trueまたはfalseを表す2つのUnicode文字（ /u2713および /u2718）を返します。
フィルターの準備が整ったので、メインモジュールのフォネカットへの依存関係として、Phonecatfiltersモジュールを登録する必要があります。
APP/JS/APP/JS
... angular.module（ 'phonecat'、['phonecatfilters']）...
テンプレート
テンプレートコードはApp/JS/Filter.jsファイルに記述されているため、このファイルをレイアウトテンプレートに導入する必要があります。
app/index.html
... <スクリプトsrc = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> ...
AngularJSテンプレートでフィルターを使用するための構文は次のとおりです。
{{expression |フィルター }}
フィルターを電話の詳細テンプレートに適用します。
App/Partials/Phone-Detail.html
... <dl> <dt>赤外線</dt> <dd> {{phone.connectivity.infrared | checkmark}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps |チェックマーク}} </dd> </dl> ...テスト
フィルターは、他のコンポーネントと同様にテストする必要があり、これらのテストは実際に簡単に完了できます。
TEST/UNIT/FILTERSSPEC.JS
（ 'filter'、function（）{module（ 'phonecatfilters'））; describt（ 'checkmark'、function（）{it（ 'boolean値をUnicode checkmark or cross'に変換する必要があります '、function（checkmarkfilter（true））。 required（false））。 }）;フィルターテストを実行する前に、Phonecatfiltersモジュールのテストインジェクターを構成する必要があることに注意してください。
./scripts/test/shを実行してテストを実行すると、次の出力が表示されます。
クロム：ランナーリセット......合計4テスト（合格：4;失敗：0;エラー：0）（3.00ミリ秒）クロム19.0.1084.36 Mac OS：4テストを実行する（合格：4;失敗：0;エラー0）（3.00ミリ秒）（3.00ミリ秒）
次に、angularjsビルトインフィルターを練習し、次のバインディングをindex.htmlに追加しましょう。
また、入力ボックスを使用してモデルを作成し、フィルタリングされたバインディングと組み合わせることもできます。次のコードをindex.htmlに追加します。
<入力ng-model = "userininput"> uppercased：{{userinpup |大文字}}
要約します
カスタムプラグインの書き込みとテスト方法がわかったので、ステップ10では、携帯電話の詳細ページをAngularJSで充実させ続ける方法を学びます。
上記は、AngularJSフィルターの情報の編集です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！