前のステップで多くの基本的なトレーニングを行ってきたので、今ではいくつかの簡単なことをすることができます。全文検索関数を追加したい（はい、これは非常に簡単です！）。同時に、優れたエンドツーエンドテストが大いに役立つため、エンドツーエンドのテストも書きます。回帰が発生したときにアプリを監視し、迅速にレポートします。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ3
アプリには検索ボックスがあります。ユーザーが検索ボックスに入ると、ページ上の電話リストが変更されることに注意してください。
ステップ2とステップ3の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
コントローラ
コントローラーに変更はありません。
テンプレート
app/index.html
<div> <div> <div> <！ - サイドバーコンテンツ - >検索：<入力ng-model = "query"> </div> <div> <！ - ボディコンテンツ - > <ul> <li ng-repeat = "電話|フィルター| query"> {{phone.name}}}}}} <p> {{phone.sniptet} </p> </div> </div>次に、<inupt>タグを追加し、angularjsの$フィルター関数を使用して、ngrepeatディレクティブの入力を処理します。
これにより、ユーザーは検索条件を入力し、すぐに電話リストの検索結果を確認できます。新しいコードを説明しましょう：
データバインディング：これはAngularJSのコア機能です。ページがロードされると、AngularJSは、入力ボックスのプロパティ値名に基づいてデータモデルの同じ名前の変数でバインドし、2つの間の同期を確保します。
このコードでは、入力ボックスにユーザーが入力したデータ名はクエリと呼ばれます。クエリは、リストIteratorによるフィルターへの入力としてすぐに使用されます（電話の電話|フィルター：Query`）。データモデルがIterator入力の変更を引き起こすと、イテレーターはDOMを効率的に更新して、データモデルの最新の状態を反映できます。
フィルターフィルターを使用：フィルター関数は、クエリの値を使用して、クエリレコードのみに一致する新しい配列を作成します。
Ngrepeatは、フィルターフィルターによって生成されたモバイルレコードデータアレイに基づいて、ビューを自動的に更新します。プロセス全体が開発者に対して透明です。
テスト
ステップ2では、テストの書き込みと実行方法を学びました。ユニットテストは、JSで記述するコントローラーやその他のコンポーネントをテストするのに非常に便利ですが、DOM操作とアプリケーション統合を簡単にテストすることはできません。これらの場合、エンドツーエンドのテストがより良い選択です。
検索機能はテンプレートとデータバインディングを通じて完全に実装されるため、最初のエンドツーエンドテストでは、これらの機能が私たちの期待を満たしていることが確認されます。
test/e2e/sinarios.js：
describe（ 'phonecat app'、function（）{describe（ '電話リストビュー'、function（）{function（）{browser（）。navigateto（ '../../ app/index.html'）;}）入力（ 'nexus'）;このテストコードの構文は、ジャスミンで以前に書いた単体テストと非常によく似ていますが、エンドツーエンドテストでは、AngularJSのエンドツーエンドテスターが提供するインターフェイスを使用しています。
エンドツーエンドテストを実行し、新しいブラウザタブで以下のいずれかを開きます。
node.jsユーザー：http：// localhost：8000/test/e2e/runner.html
他のHTTPサーバーを使用するユーザー：http：// localhost：[port-number]/[context-path] /test/e2e/runner.html
訪問者：http：//angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
このテストでは、検索ボックスとイテレーターが正しく統合されていることを確認します。 AngularJSでエンドツーエンドテストを書くのがどれほど簡単かを見つけることができます。この例は単なるテストですが、複雑で読みやすいエンドツーエンドのテストを簡単に作成できます。
練習する
{{query}} index.htmlテンプレートにバインディングして、クエリモデルの現在の値をリアルタイムで表示し、入力ボックスの値に応じてどのように変化するかを観察します。
次に、HTMLページタイトルにクエリモデルの値を表示する方法を見てみましょう。
このようなタイトルタグにバインディングを追加すると思われるかもしれません。
<Title> Google電話ギャラリー：{{Query}} </title>
ただし、ページをリロードすると、希望する結果を得ることができません。これは、クエリモデルがボディ要素によって定義されたスコープ内でのみ有効であるためです。
<body ng-controller = "phonelistctrl">
<title>要素をクエリモデルにバインドする場合は、タイトルとボディ要素の共通の祖先であるため、ngController宣言をHTML要素に移動する必要があります。
<html ng-app ng-controller = "phonelistctrl">
ボディ要素のng-controller宣言を必ず削除してください。
タイトル要素に2つのCurlyブレースをバインドすると、目標を達成できますが、ページがロードされているときにすでにユーザーに表示されていることがわかります。より良い解決策は、ページがロードされたときにユーザーには見えないngbindまたはngbindtemplateディレクティブを使用することです。
<title ng-bind-template = "Google電話ギャラリー：{{query}}"> Google電話ギャラリー</title>
次のエンドツーエンドのテストコードを、test/e2e/sinarios.jsのconfirm blockに追加します。
IT（ 'ID "status"'、function（）{expect（element（ '＃status'）。text（））。tomatch（/current filter：/s*$/）; input（ 'query'）。enter（ 'nexus'）。 （ '＃status'）。ブラウザを更新すると、エンドツーエンドのテスターがテストの障害を報告します。テストを渡すには、index.htmlを編集し、クエリバインディングであるID「ステータス」と現在のフィルター：プレフィックスを備えたDivまたはP要素を追加します。例えば：
<div id = "status"> currentフィルター：{{query}} </div>
一時停止（）を追加します;エンドツーエンドテストへの声明と再度実行します。テスターが一時停止していることがわかります！これにより、テストの実行中にアプリケーションのステータスを表示する機会を得ることができます。テストアプリケーションはリアルタイムです！検索コンテンツを変更して証明できます。少しの経験があれば、これがエンドツーエンドのテストで問題を迅速に見つけることがどれほど重要かを知っているでしょう。
要約します
これで、フルテキスト検索機能を追加し、検索が正しいことを証明するテストを完了しました！次に、ステップ4に進み、モバイルアプリにソート機能の追加を確認しましょう。
上記は、AngularJS Iteratorフィルタリングデータの編集であり、将来的に関連情報を追加し続けます。このサイトへのご支援ありがとうございます！