1. ホーム
  2. angularjs

[解決済み] AngularJS: ng-show / ng-hide が `{{ }}` 内挿で動作しない。

2022-04-19 16:03:06

質問

を使用して、いくつかのHTMLを表示/非表示にしようとしています。 ng-showng-hide が提供する機能 アンギュラーJS .

ドキュメントによると、これらの関数のそれぞれの使い方は以下の通りです。

<ブロッククオート

ngHide - {式}. - 式が真であれば、その要素をそれぞれ表示または非表示にします。 ngShow - {式}. - 式が真であれば、その要素はそれぞれ表示または非表示にされます。

これは次のような使用例で機能します。

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

しかし、オブジェクトのパラメータを式として使用する場合は ng-hideng-show には、正しい true / false を返しますが、値はブーリアンとして扱われないので、常に false :

出典

<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>

結果

<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>

これはバグか、私のやり方が悪いかのどちらかです。

オブジェクトのパラメータを式として参照することに関する相対的な情報が見つからないので、AngularJSをより理解している人が私を助けてくれるかもしれないと期待しているのですが?

どのように解決するのですか?

その foo.bar の参照は中括弧を含んではいけません。

<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>

アンギュラー 表現 は中括弧で囲む必要がありますが、Angular では ディレクティブ はありません。

参照 Angularのテンプレートを理解する .