AngularJS：ng-show / ng-hide 不适用于` `插值
Posted
技术标签:
【中文标题】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 有更好理解的人都可以帮助我？
【问题讨论】：
【参考方案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 周围的 大括号，因为角度表达式不能在角度指令中使用。
更多：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>
【讨论】：
【参考方案7】：如果你想根据一个 expression 的状态显示/隐藏一个元素，你可以使用ng-switch：
<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>
foo.bar为真时显示段落，为假时隐藏。
【讨论】：
以上是关于AngularJS：ng-show / ng-hide 不适用于` `插值的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS - 可以 ng-show/ng-hide 模式窗口吗？
AngularJS 不会验证 ng-show 隐藏的表单元素上的输入
如何根据布尔值在 AngularJS 中切换 ng-show？