AngularJS: ng-show / ng-hide在`{{ }}`插值时不工作

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

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

ngHide - {表达式}。- 如果表达式为Truthy，那么该元素将分别被显示或隐藏。 ngShow - {表达式}- 如果表达式是Truthy，那么该元素将被显示或隐藏。

这适用于以下的使用情况。

<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>

结果</b&gt。

<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有更好理解的人能够帮助我？

georgeawg
已编辑的问题 26日 五月 2018 в 11:29
编程
angularjs ng-show ng-hide
26日 九月 2012 в 10:26
3 种观点
解决办法

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需要在大括号内绑定，而Angular directives则不需要绑定。

参见Understanding Angular Templates。

Scott
编辑本段答案9日 五月 2014 в 11:59
评论(7)

试着用以下方式包装表达。 

$scope.$apply(function() {
   $scope.foo.bar=true;
})
phellipeperin
编辑本段答案12日 一月 2015 в 7:18
评论(4)

由于 "ng-show "是一个angular属性，我想，我们不需要把评价花括号（`{{}}）。

对于像class这样的属性，我们需要用评价花括号（`{{}}）来封装变量。

评论(1)