検索フォームと結果表示領域の作成


検索フォームと結果表示領域の作成検索フォームと結果表示領域の作成

#03 検索フォームを作ろう
http://dotinstall.com/lessons/youtube_search_angularjs/21703
をもとに
検索フォームと結果を表示する領域を作成

まずは index.html で
フォームを作成

<form ng-submit="doSearch()" name="myform">

としてフォーム領域を指定

この中に

<input type="text" ng-model="query" required>

として入力欄を作成
required をつけることで必須入力欄となる

<input type="submit" value="search">

で検索ボタン作成

また、入力欄になにも入力されていない場合
送信ボタンが無効になるようにしておく

これは

<input type="submit" value="search" ng-disabled="myform.$invalid">

とすればよい

ng-disabled="myform.$invalid"

これは
required になっている項目に入力されない限り
このフォーム自体が無効になる

続いて結果表示領域を作成
結果はリスト形式で表示する
このときに ul li で出る●はいらないので
スタイル設定で消す

<ul style="list-style:none; padding:0">
 </ul>

style=”list-style:none; を指定すると●が消える


PDF
カテゴリー: AngularJS   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>