このステップでは、ユーザーが電話リストが表示される順序を制御できる機能を追加します。この方法で動的な並べ替えを実装して、新しいモデルプロパティを追加し、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の双方向結合の情報の編集です。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます!