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

Question

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

这不起作用:

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

Answer 1

这是最干净的方法:

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

无需在控制器中创建辅助功能!

Answer 2

使用undefined做出决定通常是在Javascript糟糕的设计标志.您可能会考虑做其他事情.

但是,要回答你的问题:我认为这样做的最佳方法是添加帮助函数.

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

并在模板中

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

Answer 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' );
}

如果foo为null或false,这也将显示 (3认同)
最好的做法是`return(foo === undefined);`比`return(typeof foo ==='undefined');`. (3认同)
这也不正确,因为`undefined`不是JavaScript关键字(它是变量).请参阅http://stackoverflow.com/questions/7173773/why-nan-and-undefined-are-not-reserved-keywords-in-javascript (2认同)

Answer 4

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

ng-if="foo !== undefined"

当这个 ng-if 评估为 true 时，从适当的范围中删除百分比属性并调用 $digest 会从文档中删除该元素，正如您所期望的那样。