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

【问题标题】：AngularJS: ng-show / ng-hide not working with `{{ }}` interpolationAngularJS：ng-show / ng-hide 不适用于`{{ }}`插值
【发布时间】：2012-09-17 22:55:57
【问题描述】：

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

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

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

这适用于以下用例：

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

但是，如果我们使用来自对象的参数作为表达式，那么 ng-hide 和 ng-show 将被赋予正确的 true/false 值，但这些值不被视为布尔值，因此始终返回 @ 987654329@:

来源

<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

【解决方案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 expressions 需要在花括号绑定中，而 Angular directives 不需要。

另见Understanding Angular Templates。

【讨论】：

"Angular 表达式需要在花括号绑定中，而 Angular 指令不需要。"那条线就在那里。我希望我能投票两次。
如果您想检查该字段是否有值，请使用：<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>
谢谢，这不是很直观（你可以从所有的赞成票中看出）
ng-hide (docs.angularjs.org/api/ng/directive/ngHide) 的文档专门将参数称为表达式，这意味着它需要大括号。我在这里错过了什么？
这个答案其实是不正确的。花括号表示应该执行表达式并将其结果插入到 DOM 中，而指令可能会也可能不会将属性值视为表达式，具体取决于其逻辑。一些指令 (ngHref) 甚至支持花括号绑定。

【解决方案2】：

当使用角度指令与ng-model 绑定时，您不能使用{{}}，但对于绑定非角度属性，您必须使用{{}}..

例如：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

foo.bar = true 应为scope.foo.bar = true，以更改foo.bar 的值
我遇到了一个奇怪的问题，有时会显示有时不会显示，将我的范围更新包装在 $scope.$apply(function () { });为我工作:)
我是 Angular 新手，我真的不想每次需要设置变量时都这样做。有人可以解释为什么有时需要这样做吗？
A helpful blog post 帮我回答了这个问题。事实证明，任何 Ajax 或自定义侦听器都会有更新问题，需要$scope.$apply

【解决方案4】：

由于我认为ng-show 是一个角度属性，我们不需要将评估花括号（{{}}）..

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

【讨论】：

close - 我调查了一下，似乎角度 expressions 需要在大括号内，而角度 directives 不需要

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

如果你想根据一个 {{expression}} 的状态显示/隐藏一个元素，你可以使用ng-switch：

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

foo.bar为真时显示段落，为假时隐藏。

【讨论】：