AngularJS:ng-show/ng-hide 不适用于 `{{ }}` 插值

Question

我正在尝试使用 AngularJS 提供的 ng-show 和 ng-hide 函数来显示/隐藏一些 HTML .

根据文档，这些函数各自的用法如下:

ngHide – {expression} - If the expression truthy then the element is shown or hidden respectively. ngShow – {expression} - If the expression is truthy then the element is shown or hidden respectively.

这适用于以下用例:

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

但是，如果我们使用对象中的参数作为表达式，那么 ng-hide 和 ng-show 就会被赋予正确的 true >/false 值，但这些值不被视为 bool 值，因此始终返回 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 有更好了解的人都能够帮助我？

Answer 1

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 expressions需要位于大括号绑定(bind)内，如 Angular directives不。

另请参阅Understanding Angular Templates .