はじめに
ある案件でコーディングしていた時、HTMLで制御しないといけない箇所があって、
他の分岐点と同じく、ng-ifを使用したのですがそれが思わぬ落とし穴にはまってしまいました。。
知識の定着のため、この記事を書くことにしました。
ng-ifに引っ掛かてしもた
例えば、以下のHTML文があったとします。
<td>
<span ng-if="hogeOption==1;" class="hoge">Hoge</span>
<input class="hoge" ng-model="hogedayo">
<div class="hoge" role="alert">
</div>
</td>
このHTML文は、hogeオプションが1の場合のみhogeという入力欄を表示するものです。
どうやら「ng-if」と「ng-model」が同じtdタグに入っていることが分かります。
ng-if とは？
ng-ifはもともとDOMツリーの一部を削除または再作成するものだそうです。
(DOMについては、DOMとは？の章を確認ください。)
この時、ng-modelの要素も一緒に削除されてしまうのです。
例えば、入力項目欄があり、入力フォームの中に「あああ」が入力されていたとします。「あああ」を削除したくて、削除ボタンを押したとき、削除したはずの「あああ」が残ってしまいました。ng-ifのもともとの機能のせいで、削除ボタンがうまく発動していないような表示になってしまいました。。
ng-showを召喚！
ng-showは、ng-ifと違い、DOMツリーの一部が削除されず、要素を表示もしくは非表示にする役割を持っています。なので一時的にデータが担保？されると考えています。(違っていたらすみません。。)
先ほどのqiita.htmlを少しだけ変更します。
<td>
<span ng-show="hogeOption==1;" class="hoge">Hoge</span>
<input class="hoge" ng-model="hogedayo">
<div class="hoge" role="alert">
</div>
</td>
「ng-if」を「ng-show」に変更するのみです。
「ng-show」に変更したら、「あああ」も無事削除できました。
めでたしでした。。
余談
このバグを見つけるのに、私1人の力で解決するのが難しく、
お客さん先の方に夜遅くまで原因を見つけてくださりました。
本当に感謝してもしきれない。。ありがとうございます。。
DOMとは？
DOM・・・「Document Object Model」の略です。
ドキュメントを物として扱うモデルです。HTMLやXMLを自由に動かすものと思ってください。
最後に
この記事が誰かの役に立っていたら幸いです。
最後まで読んでいただき、ありがとうございました。
参考URL