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

193

我试图使用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有更好理解的任何人都可以对我有所帮助？

angularjs ng-show ng-hide

— 我头疼
source

375

该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 指令则不在。

另请参阅了解角度模板。

— 我头疼
source

76

“角度表达式必须位于花括号内，而Angular指令则不在。那条线就在那儿。我希望我能两次投票赞成。

— MushinNoShin

3

如果要检查字段是否具有值，请使用：<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz 2013年

1

谢谢，这不是很直观（您可以从所有投票中看出）

— Sentient 2014年

1

ng-hide的文档（docs.angularjs.org/api/ng/directive/ngHide）专门将参数称为表达式，这意味着它需要花括号。我在这里想念什么？

— Ed Norris

1

这个答案实际上是不正确的。大括号表示应该执行表达式并将其结果插入DOM中，而伪指令可能会也可能不会将属性值视为表达式，具体取决于其逻辑。有些指令（ngHref）甚至支持花括号绑定。

— 瓦萨卡2014年

31

{{}}当使用angular指令进行绑定时，不能使用，ng-model而要绑定非Angular属性，则必须使用{{}}..

例如：

ng-show="my-model"
title = "{{my-model}}"

— 四万三喜
source

18

尝试使用以下方式包装表达式：

$scope.$apply(function() {
   $scope.foo.bar=true;
})

— rn
source

7

对foo.bar = true应scope.foo.bar = true，改变的价值foo.bar

— Rajkamal萨勃拉曼尼亚

1

我遇到一个奇怪的问题，有时会显示它，有时却不会显示，将范围更新包装在$ scope。$ apply（function（）{}）;中。为我工作:)

— 永不更新

我是angular的新手，我真的希望每次需要设置变量时都不要这样做。有人可以解释为什么有时需要这样做吗？

— 戴维斯，2015年

一篇有用的博客文章帮助我回答了这个问题。事实证明，任何Ajax或自定义侦听器都将更新问题，并且需要$scope.$apply

— davis

7

由于ng-show我认为这是一个角度属性，因此我们不需要将评估花括号（{{}}）放进去。

对于类似的属性，class我们需要使用评估花括号（{{}}）封装变量。

— 拉杰卡马尔·苏伯拉曼人
source

close-我调查了一下，似乎角度表达式需要放在大括号中，而角度指令则不在其中

— My Head Hurts 2013年

7

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
    function controller($scope) {
        $scope.data = {
            show: true,
            hide: false
        };
    }
</script>

<div ng-controller="controller">
    <div ng-show="data.show"> If true the show otherwise hide. </div>
    <div ng-hide="!(data.hide)"> If true the show otherwise hide.</div>
</div>

— 阿尼尔·辛格（Anil Singh）
source

0

删除foo.bar周围的{{}}括号，因为在角度指令中不能使用角度表达式。

例

  <body ng-app="changeExample">
    <div ng-controller="ExampleController">
    <p ng-show="foo.bar">I could be shown, or I could be hidden</p>
    <p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
    </div>
    </body>

<script>
     angular.module('changeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.foo ={};
          $scope.foo.bar = true;
        }]);
</script>

— 维杰·库玛·雷迪（Vijay Kumar Reddy）
source

-1

如果要基于一个{{expression}}的状态显示/隐藏元素，可以使用ng-switch：

<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>

如果foo.bar为true，则显示该段落；否则为false。

— 罗伯托
source