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