Angular.jsで作るノートパッドWebアプリケーション

検索用モデルの作成

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノートリストに対して検索機能を実装する為のモデルの作成方法について、解説致します。
講師:
02:23

字幕

このレッスンでは ノートリストに対して 検索機能を実装するための モデルの作成方法について解説いたします まずはダウンロードしてきた こちらの 「search_model」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう それではまず 現状の htmlファイルを ブラウザで開いて 今回実装しようとしている内容を 確認してみたいと思います こちらの「index.html」ファイル これをブラウザで開きます すると このように表示されてきましたね 今回は この機能を 実装するための第一段階である 検索用のモデルの作成の方法について 見ていきたいと思います それではエディタに戻ります 今回のモデルの作成は この htmlファイル上で行っていきます 注目していただきたい部分は こちらの部分となります 先ほどの検索フォームの 「input」ボックスですね 今回は その中の こちらの部分となります これまでのレッスンで学んできた モデルと同様 こちらの「input」タグにも 「ng-model」と書いて 「="search"」という風にしています これで この「search」という名前の モデルができあがりました そして こちらの inputボックスに 入力された内容が こちらのモデルの「search」の中に 代入されてくる形になります これで検索機能を実装するための 第一段階が完了しました とても簡単ですね 以降のレッスンでは 今回作成した この検索用のモデルを利用して Angular.jsのフィルター機能 というものを使いながら 実際に検索結果を表示させる方法について 解説いたしますので そちらも併せてご覧ください 以上で レッスンは終了です 今回は ノートリストに対して 検索機能を実装するための モデルの作成方法について解説いたしました

Angular.jsで作るノートパッドWebアプリケーション

Angular.jsはJavaScriptライブラリで、複雑なWebアプリケーションを簡単かつ効率的に開発していくことが可能です。このコースではノートパッド機能をもったWebアプリケーションを実際に作り、それをAngular.jsを使って実装する方法について学習します。このコースを見れば、Angular.jsの基本的な内容とワークフローがわかるでしょう。

1時間35分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年11月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。