コース: AngularJS 1.6でToDoリストを作ろう
今すぐ登録して、24,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。
配列のデータから複数の要素を動的につくる
このレッスンでは ngRepeat directive を 使って複数のデータから 要素を動的に作ります。 現在開いている AngularJS のアプリケーションなんですが、 controller 'TodoListcontroller' に todos というプロパティがあって そこに配列で ２つのオブジェクト、項目が 定められています。 もっともまだ この要素のなかでは ngRepeat directive は 使っていないので 表示できる項目は1つだけです。 ということなので 暫定的に todo というプロパティを定めて そこに todos の 0 番目ということですから 最初の項目ですね。 これを作りました。 そして現在 こちらのデータバインディングは TodoListController が、 todolist というプロパティになっているので todolist.todo と いうことでこの１個目の項目だけの プロパティを設定した 暫定的なプロパティによって データバインディングが 行われています。 ですから、今のところこの1項目目との データバインディングだけが設定されています。 現在の状態を確認しましょう。 [ファイル] から [リアルタイムプレビュー] です。 最初の項目 「AngularJS を学ぶ」 が出ていて done というプロパティ これはチェックボックスのオンオフ true/false なんですが、 true が設定されていたので チェックがついています。 外せば、これは class が 動的にデータバインディングされていますので カラーがグレーになって 取り消し線がつくという風になっています。 もちろん 入力フィールドのテキストと この項目の テキストも データバインディングが出来ています。 1項目目との データバインディングだけできているという状態です。 では、ngRepeat directive を使って 複数の todolist の要素ですね。 それを表示したいと思います。 ということですので この暫定的なプロパティは無しにします。 この2つの項目を li 要素として 2つ作りたいわけですね。 ということですので ここに、 ng-repeat を加えます。 そして、クオテーションの中に 構文としては まず、変数名ですね。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。