このステップでは、ユーザーが電話リストが表示される順序を制御できる機能を追加します。この方法で動的な並べ替えを実装して、新しいモデルプロパティを追加し、Iteratorと統合し、データバインディングが残りを行うことができます。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ4
検索ボックスに加えて、アプリには電話の配置の順序を制御できる追加のダウンメニューがあります。
ステップ3とステップ4の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
テンプレート
app/index.html
検索：<入力ng-model = "query"> sort by：<select ng-model = "orderprop"> <option value = "name"> alphabetical </option> <option value = "age"> newest </option> <ul> <li ng-repeat = "電話|フィルター| Query | Ordery：name {{{{{{{{{{= oder.name} <p> {{phone.snippet}} </p> </li> </ul>index.htmlで次の変更を加えました。
最初に、ユーザーが提供する2つのソートメソッドを選択できるように、OrderPropと呼ばれる<elect>タグを追加しました。
次に、フィルターフィルターの後にOrderbyフィルターを追加して、イテレーターに入力するデータを処理します。 Orderbyフィルターは、アレイを入力として使用し、コピーをコピーし、コピーを再発生させてイテレーターに出力します。
AngularJSは、選択要素とOrderPropモデルの間に双方向結合を作成します。次に、OrderPropはOrderbyフィルターへの入力として使用されます。
ステップ3でデータバインディングとイテレーターについて議論したときに言ったように、データモデルが変更されても（ユーザーがドロップダウンメニューで異なる順序を選択するなど）、AngularJSデータバインディングはビューを自動的に更新します。不器用なDOMオペレーションはありません！
コントローラ
app/js/controllers.js：
function phoneListctrl（$ scope）{$ scope.phones = [{"name"： "nexus s"、 "snippet"： "fastはnexus S."、 "age"：0}、{"name"： "motorola xoom™with wi-fi"、 "snippet"： "" "：" "" "：" snippet。 「Motorola Xoom™™」、「スニペット」：「次の世代のタブレット」、「年齢」：2}]; $ scope.orderprop = 'age';}携帯電話モデル - 携帯電話アレイ - 各携帯電話のレコードに年齢属性を追加しました。 Age属性に従って電話を並べ替えます。
OrderPropのデフォルト値を年齢にするために、コントローラーコードに行を追加しました。デフォルトの値を設定しない場合、ユーザーがドロップダウンメニューで注文を選択するまで、このモデルは非初期化のままになります。
次に、双方向のデータバインディングについて話す必要があります。アプリがブラウザにロードされている場合、「最新」がドロップダウンメニューで選択されていることに注意してください。これは、OrderPropをコントローラーの「年齢」に設定したためです。したがって、バインディングは、モデルからユーザーインターフェイス、つまりモデルからビューへのデータの拘束力のある方向に機能します。ドロップダウンメニューで「アルファベット順」を選択すると、データモデルが同時に更新され、電話リスト配列が再注文されます。この時点で、データの結合は別の方向、つまりモデルへのデータのバインディングから有効になります。
テスト
私たちが行う変更は、単体テストまたはエンドツーエンドテストによって検証できます。まずユニットテストを見てみましょう：
test/unit/controllersspec.js：
説明（ 'Phonecat Controllers'、function（）{describs（ 'phonelistctrl'、function（）{var scope、ctrl; beforeeach（function（）{scope = {}、ctrl = new phoneListctrl（scope）;}）; it }）; 'function（）{scope.orderprop）.tobe（' age '）;}）;ユニットテストでは、デフォルト値が正しく設定されていることを確認します。
Jasmineのインターフェイスを使用して、PhoneListctrlコントローラーを抽出してください。
これらのユニットテストを実行すると、前と同じように、./scripts/test.shスクリプトを実行すると、次の出力が表示されます（注：テストが実行される前にhttp：// localhost：9876を開く必要があります。
クロム：ランナーリセット...合計2テスト（合格：2;失敗：0;エラー：0）（3.00ミリ秒）クロム19.0.1084.36 Mac OS：2つのテスト（合格：2;失敗：0;エラー0）（3.00ミリ秒）
次に、エンドツーエンドのテストに注意を向けます。
test/e2e/sinarios.js：
... it（ 'ドロップダウン選択ボックスを介して電話注文を制御できる'、function（）{//データセットを狭くして、テストアサーションをより短い入力（ 'query'）。 xoom/u2122 "]））; select（ 'orderprop'）エンドツーエンドのテストは、オプションボックスのソートメカニズムが正しいことを確認します。
ブラウザを更新して、エンドツーエンドテストを再度実行できるか、AngularJSサーバーで実行することができます。
練習する
PhoneListCtrlコントローラーでは、ステートメント設定OrderPropを削除すると、AngularJSがドロップダウンメニューに空白のオプションを一時的に追加し、ソート順序がデフォルトのソート（つまり、アンソート）です。
index.htmlテンプレートにバインディングする `{{orderprop}}を追加して、その値をリアルタイムで表示します。
要約します
これで、アプリケーションの検索機能を提供し、完全にテストしました。ステップ5 AngularJSのサービスと、AngularJSが依存関係噴射をどのように使用するかについて学びます。
上記は、Angularjsの双方向結合の情報の編集です。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます！