AngularJSで条件分岐しながら要素を表示・非表示する

条件によって、特定のdivのブロックやリンクを表示したり、非表示にしたりする方法です。以下のように記述します。

■ng-classを利用する方法

ng-class="(hogehoge.length == 1) ? 'hidden' : 'disp'"

()の中が条件となります。条件に一致していたら、非表示にする。それ以外は表示となっています。普通の三項演算子と同じですね。

これで、いろいろテンプレートを動的に切り替える感じのことができるようになります。

■ng-showとng-hideを利用する

もう一つはng-showとng-hideを利用する方法です。以下のように記述します。

ng-show="value"

valueの評価がtrueになれば表示されて、falseになれば非表示になります。

ng-hideは逆になります。