検索フォームと結果表示領域の作成
#03 検索フォームを作ろう
http://dotinstall.com/lessons/youtube_search_angularjs/21703
をもとに
検索フォームと結果を表示する領域を作成
まずは index.html で
フォームを作成
1 | <form ng-submit="doSearch()" name="myform"> |
としてフォーム領域を指定
この中に
1 | <input type="text" ng-model="query" required> |
として入力欄を作成
required をつけることで必須入力欄となる
1 | <input type="submit" value="search"> |
で検索ボタン作成
また、入力欄になにも入力されていない場合
送信ボタンが無効になるようにしておく
これは
1 | <input type="submit" value="search" ng-disabled="myform.$invalid"> |
とすればよい
1 | ng-disabled="myform.$invalid" |
これは
required になっている項目に入力されない限り
このフォーム自体が無効になる
続いて結果表示領域を作成
結果はリスト形式で表示する
このときに ul li で出る●はいらないので
スタイル設定で消す
1 2 | <ul style="list-style:none; padding:0"> </ul> |
style=”list-style:none; を指定すると●が消える