我试图使用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>。
<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 expressions需要在大括号内绑定,而Angular directives则不需要绑定。