コース: AngularJS 1.6でToDoリストを作ろう
今すぐ登録して、24,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。
項目の合計件数を表示する
このレッスンでは、データの項目数を調べて データバインディングして 要素に表示します。 今開いている AngularJS の アプリケーションなんですけれども データが配列に入っています。 todos ですね。 テキストがあって それから、チェックボックスのオープンするか それともチェックするかというのを Todo false で設定しています。 それを ng-repeat の ディレクティブを使って 要素数だけ li 要素の項目を加えています。 こちらがチェックボックスですね。 そして この done のプロパティに従って チェックボックスをチェックするか オープンにするかを決めます。 それから、こちらの span 要素には text のプロパティのこの項目ですね、 項目のテキストを追加する ということになっています。 それからもう一つ、form の方には テキスト入力フィールドがありまして ここは todoText というプロパティで データバインティング されているんですけれども ［submit］ボタンを押した時に ng-submit のディレクティブで コントローラーの addTodo を 呼び出して その中では この todos に 新にそのテキストを設定し チェックボックスはオープンの状態で この todos に加える ということになっています。 ですから、項目の追加ができる ということですね。 現在の動きを確認しましょう。 ［ファイル］＞［リアルタイムプレビュー］ です。 項目が 2 つ表示されました。 1 個目は done の値が Todo になっていましたので チェックが付くと もう 1 つは false なので チェックが付きません。 このチェックボックスのチェックによって テキストのスタイル 打ち消し線が変わります。 それから、「項目追加」と打ちますけれども ［追加］ボタンで 項目は追加できます。 やはりチェックボックスで スタイルは変わるということですね。 項目は少なければ 今 3 件とすぐ分るんですが ここに全部で何件という表示を 一番上に加えたいと思います。 これをデータバインティングで設定します。 todoList の項目数は この todos という配列に 入っているわけですね。 初めは 2 件ですけれども addTodo を使えば…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。