Bindingをやってみる2012-05-26Tweetチュートリアルを適当に読みながらやってみます。http://docs.angularjs.org/tutorial/step_04今回は「データバインディングする二つの方法」についてです。アクセスAngularJS-step-4.m4vインクリメンタルサーチは前回と同じですが、今回はさらにモデルのソートが行われているようです。</div></body></html>ソート方法を指定しているセレクトボックスに注目します。いうモデルが作られています。モデルをフィルタリングしているのだろうということが前回のチュートリアルを済ませていれば、勘付くはずです。モデルをバインディングしています。いう処理をパイプでつないでいるようです。セレクトボックスから生成されるモデルです。いう命令を使うようです。age"であることがわかります。モデルの中身が動的に変更されていると考えられます。基準にしてソートしているということが予想できます。'age';}これがスクリプトで定義されたモデルになります。今回もコントローラの中でモデルを定義しているようです。いうプロパティが用意されていました。いう二つのモデルが定義されています。テンプレートでも定義されていましたね。これがデータバインディングの二つの方法ということでしょうか。menu.コントローラで同名のモデルを定義しておくとデフォルト値として使えるようです。ユーザーがセレクトボックスに対してアクションを起こす前から初期状態を制御できるわけですね。いうように初期値を設定せずにページを再読み込みするとセレクトボックスは何も選択されていない状態となりました。内部的な処理が推測できるようで非常に興味深いですね。ちなみにこの状態でセレクトボックスを選びなおすは選択肢は「Alpabetical」と「Newest」の二つのみになりました。一つ目のoptionは消えてしましました。この機能を使うときにはスクリプトで初期値を決めておくのがよさそうです。クラスで生成されたモデルが期待される値であるかをテストしているようです。オブジェクトにはそのコントローラがどのスコープで呼び出されたかの情報が入っているようです。指定される要素が一つのアプリケーションの単位となり、その中で定義されてるコントローラはこのアプリケーションのスコープを持っているようです。modeを選択ブラウザがキャプチャ待ちになったら別の端末から次のコマンドを実行します。ms)test/e2e/scenarios.jsend-to-endテストと呼ばれるものを実行してみます。UIをシミュレーションできます。});});select('orderProp').option('Alphabetical');セレクトボックスで「Alphabetical」を選択したというUIをシミレーションしているようです。メソッドではoptionのバリューではなくラベルを渡すようですね。