ng-if 中的原始 javascript 不起作用？答案

【问题标题】：Raw javascript in ng-if doesn't work?ng-if 中的原始 javascript 不起作用？
【发布时间】：2016-05-12 15:50:09
【问题描述】：

我正在尝试检查 Angular $scope 中的对象中是否存在键。在我的控制器中，我有这个：

$scope.the_object = {'the_key': 123};

在我的模板中我有这个：

<span ng-if="'the_key' in the_object">
    the_key exists in the_object
</span>

但我在控制台中得到以下跟踪：

Error: [$parse:syntax] http://errors.angularjs.org/1.4.7/$parse/syntax?p0=in&p1=is%20an%20unexpected%20token&p2=11&p3='the_key'NaNn%20the_object&p4=in%20the_object
    at Error (native)
    at http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:6:416
    at Object.s.throwError (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:209:339)
    at Object.s.ast (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:202:118)
    at Object.sd.compile (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:211:203)
    at fc.parse (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:238:193)
    at b.$get (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:117:315)
    at n.a.$get.n.$watch (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:127:125)
    at a.link (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:254:214)
    at aa (http://52.29.xx.xx:5000/bower/angular/angular.min.js?version=1.4.7:73:90)

我如何从 ng-if 中检查 the_key 是否存在于 the_object 中？

【问题讨论】：

标签： javascript angularjs object indexing key

【解决方案1】：

如果您要检查的属性在您的对象内部而不是继承的，您可以使用下面的代码。

<span ng-if="the_object.hasOwnProperty('the_key')"> the_key exists in the_object </span>

如果不是上述情况，并且您确保没有在对象中初始化 the_key undefined，您可以使用以下代码：

<span ng-if="the_object['the_key'] !== undefined"> the_key exists in the_object </span>

检查这个plunker

如果您确定不初始化对象未定义的任何值，则第二种方法比第一种方法快得多。在https://stackoverflow.com/a/22074727/3292746查看更多信息

【讨论】：

有效！但为什么？！你知道为什么我尝试使用的普通 javascript 不起作用吗？我认为 Angular 只是将引号之间的代码作为 js 进行评估？
这是因为，ng-if 期望 angular 表达式和 angular-expression 与 javascript 表达式不同。在 (docs.angularjs.org/guide/expression) 了解有关 Angular 表达式的更多信息。并且根据它不允许 void expressoin.But 它的工作原理。最好使用 undefined 而不是 void(0)。

【解决方案2】：

你可以简单检查一下

ng-if="the_object.the_key !== undefined"

它检查the_key 是否存在于the_object 中。如果存在则返回true，如果不存在则返回false。存在意味着不是未定义的。

【讨论】：

那不一样。如果the_object.the_key 是false 或null 怎么办？
好的，更新了我的代码。如果你检查!== undefined 那么它会像你想要的那样工作。