検索結果の有無で表示、非表示切り替え
#04 表示・非表示を切り替えよう
http://dotinstall.com/lessons/youtube_search_angularjs/21704
を元に
検索結果の有無で表示、非表示の切り替えを実装
li要素の中で、ng-repeat を使うことで
要素の分だけ繰り返し処理を行う
<li ng-repeat="result in results"> </li>
とする
そして、この ul li で作成されるリストの中に
データが入ってきたらリスト表示
データがないのなら
検索欄をつかって検索してください
というようなメッセージを表示する
まず、何も検索されていない状態なら
<p>↑から検索してください</p>
と表示する
これで、データがあるか判定するには
<ul style="list-style:none; padding:0">
を
<ul ng-show="results.length" style="list-style:none; padding:0">
というように
ng-show="results.length"
を
追加する
results.length があるということは
何らかの結果が返ってきているということなので
この値が true になり
リストが表示されるようになる
逆に、
<p>↑から検索してください</p>
の部分は
検索結果がある場合
つまり
results.length が true のときには消しておきたいので
ng-hide=”results.length” をつけて
かくすようにする
ng-show="results.length"
で表示
ng-hide="results.length"
で非表示
と覚えておく
なので
<p>↑から検索してください</p>
を
<p ng-hide="results.length">↑から検索してください</p>
とする
これでブラウザをリロードすると
まだ検索結果はないので
↑から検索してください
が表示される