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

Question

我试图使用 AngularJS 提供的ng-show和ng- hide函数显示/隐藏一些HTML 。 ****

根据文档，这些功能的各自用法如下：

ngHide – {表达式}-如果表达式为true，则分别显示或隐藏该元素。ngShow – {表达式}-如果表达式为真，则分别显示或隐藏该元素。

这适用于以下用例：

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

但是，如果我们使用对象中的参数作为表达式，则ng-hide和ng-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有更好理解的任何人都可以对我有所帮助？

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 表达式必须位于花括号内，而Angular
指令则不在。

另请参阅了解角度模板。