AngularJS：不能以``{{}}插值工作的，显示/隐藏(AngularJS: ng-show

我想显示/使用隐藏一些HTML ng-show和ng-hide所提供的功能AngularJS 。

根据该文件，是用于这些功能的相应的使用如下：

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>

结果

<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或许能帮助我的任何相关信息？

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

角表达式需要是花括号绑定，那里的角内的指令没有。

另请参见了解角模板。

Answer 2:

您无法使用{{}}采用了棱角分明的指令时，与结合ng-model ，但结合无棱角的属性，你将不得不使用{{}} ..

例如：

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

Answer 3:

尝试包裹表达：

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

Answer 4:

由于ng-show是角属性，我认为，我们并不需要把评价的花括号{{}} ）..

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

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

Answer 6:

除去{{}}周围foo.bar牙套因为角表达式不能在角指令中使用。

了解更多： https://docs.angularjs.org/api/ng/directive/ngShow

例

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

Answer 7:

如果你想显示/隐藏基于一个状态元素{{表达式}}您可以使用ng-switch ：

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

当foo.bar是真正的段落将被显示，藏假时。

文章来源: AngularJS: ng-show / ng-hide not working with `{{ }}` interpolation