如何检查AngularJS模板中是否未定义范围变量？答案

【问题标题】：How to check if a scope variable is undefined in AngularJS template?如何检查AngularJS模板中是否未定义范围变量？
【发布时间】：2014-11-20 15:00:57
【问题描述】：

如何检查范围变量是否未定义？

这不起作用：

<p ng-show="foo == undefined">Show this if $scope.foo == undefined</p>

【问题讨论】：

欢迎来到 StackOverflow！请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”。
啊，我没想到您无法访问模板标记中的“typeof”关键字。对于那个很抱歉。我已经删除了我的近距离投票。

标签： angularjs angularjs-ng-show

【解决方案1】：

这是最简洁的方法：

<p ng-show="{{foo === undefined}}">Show this if $scope.foo === undefined</p>

无需在控制器中创建辅助函数！

【讨论】：

这不是被动的。意思是当 foo 改变时，ng-show 不会相应改变。
花括号不应该与 ng-show 一起使用，因为它只是表达式。花括号用于评估其他字符串文本中的表达式
我收到Error: [$parse:syntax] Syntax Error: Token '{' invalid key at ..。

【解决方案2】：

使用undefined 做出决定通常是 Javascript 设计不佳的标志。你可以考虑做点别的。

但是，要回答您的问题：我认为最好的方法是添加一个辅助函数。

$scope.isUndefined = function (thing) {
    return (typeof thing === "undefined");
}

在模板中

<div ng-show="isUndefined(foo)"></div>

【讨论】：

或者你可以使用angular的辅助函数，angular.isUndefined(object) / angular.isDefined(object)
我认为不能处理具有未定义属性的对象是糟糕的设计前端代码。

【解决方案3】：

更正：

HTML

  <p ng-show="getFooUndef(foo)">Show this if $scope.foo === undefined</p>

JS

$scope.foo = undefined;

$scope.getFooUndef = function(foo){
    return ( typeof foo === 'undefined' );
}

小提琴：http://jsfiddle.net/oakley349/vtcff0w5/1/

【讨论】：

你说得对，没想到是这样的。编辑答案
这也不正确，因为undefined 不是 JavaScript 关键字（它是一个变量）。见stackoverflow.com/questions/7173773/…
使用return (foo === undefined); 比return (typeof foo === 'undefined'); 更好。
@Oakley 请注意 === 运算符本身也检查值和类型。所以你不需要使用 typeof 操作符来做复杂的代码

【解决方案4】：

由于 Angular 的行为发生了变化，因此发布了新的答案。使用 undefined 检查相等性现在可以在角度表达式中使用，至少从 1.5 开始，如下代码可以使用：

ng-if="foo !== undefined"

当这个 ng-if 的计算结果为 true 时，从适当的范围中删除 percents 属性并调用 $digest 会从文档中删除元素，正如您所期望的那样。

【讨论】：

【解决方案5】：

如果foo 不是布尔变量，那么这将起作用（即，当该变量有一些数据时，您想显示它）：

Show this if $scope.foo is undefined

反之亦然：

Show this if $scope.foo is defined

【讨论】：

【解决方案6】：

如果您使用的是 Angular 1，我建议您使用 Angular 的内置方法：

angular.isDefined(值);

参考：https://docs.angularjs.org/api/ng/function/angular.isDefined

【讨论】：

【解决方案7】：

你可以使用双管道操作来检查after语句的值是否未定义：

<div ng-show="foo || false">
    Show this if foo is defined!
</div>
<div ng-show="boo || true">
    Show this if boo is undefined!
</div>

Check JSFiddle for demo

对于双管的技术解释，我更喜欢看这个链接： https://stackoverflow.com/a/34707750/6225126

【讨论】：

嗯，不，这不等同于检查它是否实际上是未定义的。如果 boo 变量是 0、null、false 或只是一个空字符串，您的示例将失败。

【解决方案8】：

正如@impulsgraw 所写。您需要在管道之后检查未定义：

<div ng-show="foo || undefined">
    Show this if foo is defined!
</div>
<div ng-show="boo || !undefined">
    Show this if boo is undefined!
</div>

https://jsfiddle.net/mjfz2q9h/11/

【讨论】：

【解决方案9】：

试试这个 angular.isUndefined(value);

https://docs.angularjs.org/api/ng/function/angular.isUndefined

【讨论】：

【解决方案10】：

Show this if $scope.foo === undefined

【讨论】：