コース: AngularJS 1.6でToDoリストを作ろう
今すぐ登録して、24,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。
inputとspan要素をlabel要素に含める
このレッスンでは、label 要素を使って チェックボックスのチェックのオンオフを し易くしたいと思います。 今のこの AngularJS アプリケーションの動きを ちょっと確認してみましょう。 ［ファイル］＞［リアルタイムプレビュー］ です。 このチェックボックスですね、 オンオフによって span 要素なんですけれども テキストのスタイルは変わります。 チェックが付くと、グレーになって 打消し線が付くと 外れると普通の状態。 ところが、このテキストをクリックしても チェックボックスは変わりません。 インターフェースとしては このテキストをチェックしても チェックボックスのオンオフが 出来るようにした方が扱い易いですね。 その設定をしましょう。 その時に使うのが label 要素です。 todoList の項目はこの li 要素 それを ng-repeat のディレクティブで 項目の数だけ、チェックボックスと span 要素のテキストを加えてみます。 こうすると、このチェックボックスの クリックをしないと チェックボックスのオンオフができません。 けれど、この 2 つを 一緒に label 要素に入れてしまえば こちらの span 要素をクリックしても この input 要素 チェックボックスへの操作 という風に見なされます。 ですから、テキストをクリックしても チェックボックスのオンオフが出来る ということです。 では、label 要素を加えましょう。 label ということで インテントはここ合うとしましょうね。 そして label 要素の閉じということで これだけです。 そうすると、label 要素の子供として チェックボックスと span 要素のテキストが貼りますと span 要素の操作の チェックボックスの操作として 見なされるということになります。 確認してみましょう。 ［ファイル］＞［保存］して そして、［リアルタイムプレビュー］です。 勿論、普通にチェックボックスを オンオフしていいんですけれども 今回はテキストをクリックしても チェックボックスが付き チェックボックスが外れるということで これで、インターフェースとしては 改善されたのではないでしょうか。 このレッスンでは span 要素のテキストがクリックされても…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。