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

发布于 2022-07-28 22:54:48

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

根据文档,这些功能的各自用法如下:

ngHide - {expression} - 如果表达式为真,则分别显示或隐藏元素。ngShow - {expression} -
如果表达式为真,则分别显示或隐藏元素。

这适用于以下用例:

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

但是,我们是否应该使用对象中的参数作为表达式,然后为ng-hideandng- 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 有更好理解的人都可以帮助我?

关注者
0
被浏览
8
1 个回答
  • 面试哥
    面试哥 2022-07-28
    为面试而生,有面试问题,就找面试哥。

    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指令不需要。

    另请参阅了解 Angular 模板



推荐阅读
知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看