レッツトライ!しもしも

エンジニアときどきイラストレーターのしもしもがレッツトライ!したことを描くブログ

[AngularJS]テーブルのレイアウトを保ちつつ、文字のみを消す方法

      2016/01/14

最近、AngularJSと格闘しています。リストをテーブル表示を行うことがありまして。テーブルのレイアウトを保ちつつ、文字のみを消す方法が地味に時間かかってしまったので、メモしておきます。

表示/非表示の制御は ng-show

AngularJSのテンプレートで連携された値によって表示/非表示の制御を行うには、ng-show属性を使用します。
たとえばこんな感じ。下のソースコードは$scopeにnameがあれば、表示、なければ非表示となります。

テーブルだと文字要素がないとtd要素自体が表示されない

テーブルのtd要素をng-show属性で制御するとtd要素全体の表示/非表示の制御となり、サムネイルのような歯抜けの状態で表示されてしまいます。

……これはカッコ悪い。

解決方法

td要素の中の文字列にng-show属性で制御します。

td要素自体を表示/非表示するのではなく、td要素の中の文字列にng-show属性で制御します。たとえば、span要素で囲むなどです。

CodePenに公開しました

今回のソースコードをCodePenに公開しました。beforeのテーブルとafterのテーブルのNo.3の箇所を見比べてみてください。

See the Pen AngularJS Table td ng-show by simo2 (@lets-try-simo2) on CodePen.0

まとめ

調べまくって、でも思いつかなくて、仲間に相談したらすぐ解決したTipsでした。うじうじ悩まず、聞くのも大事ですね。それでも、AngularJSだけでなく、HTML5やJavaScriptの基礎、JQueryの制御をもう少し勉強し直したいと思う、しもしもでした。

シェアする

 - Tips ,