在AngularJS模板中如何检查作用域变量是否未定义？

Question

如何检查作用域变量是否为未定义？

这种方法不起作用：

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

- Sebastian Barth

---

欢迎来到StackOverflow！请参阅“问题标题是否应包含“标签”？”（http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles），共识是“不应该”。 - user57508

啊，我没考虑到你在模板标记中没有访问“typeof”关键字的事实。对此感到抱歉。我已经取消了我的关闭投票。 - Josh Darnell

Answer 1

这是最干净的做法：

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

在控制器中不需要创建帮助函数！

- jlewkovich

---

这不是响应式的。意思是当foo改变时，ng-show并不相应地改变。 - user409460

使用ng-show时不应该使用花括号，因为它只是一个表达式。花括号用于在字符串文本中评估表达式。 - Naren

我收到了 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at .. 的错误信息。 - fabpico

Answer 2

在JavaScript中，使用undefined来做决策通常是不良设计的标志。你可能需要考虑其他方式。

然而，为了回答你的问题：我认为最好的方法是添加一个辅助函数。

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

并且在模板中

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

- Umur Kontacı

---

你可以使用Angular的辅助函数，angular.isUndefined(object) / angular.isDefined(object)。这些函数可以帮助你判断一个对象是否已定义。 - Bruno Peres

我认为，无法处理具有未定义属性的对象是前端代码设计不良的表现。 - SSH This

Answer 3

Corrected:

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

Fiddle: http://jsfiddle.net/oakley349/vtcff0w5/1/

- Oakley

---

你说得对，我没有那么想过。正在编辑答案。 - Oakley

这也是不正确的，因为undefined不是JavaScript关键字（它是一个变量）。请参阅https://dev59.com/_Ww05IYBdhLWcg3wiybg。 - Josh Darnell

最好实践是使用return (foo === undefined);而不是return (typeof foo === 'undefined');。 - volent

@Oakley 请注意 === 运算符本身会检查值和类型，因此您不需要使用 typeof 运算符编写复杂的代码。 - dextermini

Answer 4

由于Angular的行为已经改变，我发布了新答案。现在，在Angular表达式中使用undefined进行比较是有效的，至少在1.5版本中是有效的，如下代码所示：

ng-if="foo !== undefined"

当ng-if评估为真时，从相应的作用域中删除百分比属性并调用$digest将该元素从文档中移除，这符合您的预期。

- Tahsis Claus

Answer 5

如果foo不是布尔变量，那么这将起作用（即当该变量有一些数据时，您想显示此内容）： <p ng-show="!foo">如果$scope.foo未定义，则显示此内容</p> 反之亦然： <p ng-show="foo">如果$scope.foo已定义，则显示此内容</p>

- Naguib Ihab

Answer 6

您可以使用双竖线运算符来检查语句后的值是否未定义：

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

查看JSFiddle演示

关于双管道的技术解释，我更倾向于查看此链接： https://dev59.com/yHE85IYBdhLWcg3wYicB#34707750

- Mahdi Fathalla

---

嗯，不，这并不等同于检查它是否实际上未定义。如果“boo”变量为“0”，“null”，“false”或仅为空字符串，则您的示例将失败。 - impulsgraw

Answer 7

正如@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/

- D-Unit

Answer 8

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

angular.isDefined(value);

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

- Syed Usman

Answer 9

试试这个 angular.isUndefined(value);

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

- hamil.Dev

Answer 10

<p ng-show="angular.isUndefined(foo)">如果 $scope.foo === undefined，则显示此内容</p>

- Falcon