AngularJS: ng-show/ng-hide 不能使用‘{{}’插值

我试图使用 强大提供的 ng-show和 ng-hide函数显示/隐藏一些 HTML。

根据文件，这些职能的用途如下:

NgHide-{ expression }-如果表达式为 true，则元素分别显示或隐藏。 NgShow-{ expression }-如果表达式为 true，则元素分别显示或隐藏。

这适用于以下用例:

<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 更好的理解可能会帮助我吗？

284059 次浏览
小开
最佳答案

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>

角 表情需要在卷曲支撑绑定，而角 指令不。

参见 理解角度模板。

小开

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

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

由于 ng-show是一个角属性，我认为，我们不需要把评估花括号(\{\{}})。

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

小开

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

例如:

ng-show="my-model"
title = "\{\{my-model}}"
小开 
<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>
小开

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

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

段落将在 foo.bar 为 true 时显示，在 false 时隐藏。

小开

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

提交答案