如何使用无效字符访问对象属性

IT技术 javascript regex angularjs google-analytics
2021-01-31 19:36:11

我正在编写一个 Angular 应用程序,该应用程序与已在使用的 Google Analytics API 交互。Google 返回的数据以“ga:”为前缀,如示例“ga:newVisits”。

如果我使用表达式 {{total.ga:newVisits}},Angular 无法解析它。任何试图逃避冒号继续的尝试都会导致错误或完全逃避我的表达。

如何将 {{total.ga:newVisits}} 传递给 Angular 以便表达式正常工作?

<!doctype html>
  <html ng-app="AnalyticsApp">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
      <script src="angular-controller.js"></script>
    </head>
    <body ng-controller="AnalyticsCtrl">
      <ul>
        <li ng-repeat="total in result">
          {{total.ga:newVisits}}
        </li>
      </ul>
    </body>
  </html>
2个回答

在 JavaScript 中,对象属性可以通过点符号或括号符号访问。点符号通常更简洁,但也有限制。正如您所注意到的,您的属性包含无效字符,因此无法通过点表示法访问。然后,解决方案是使用括号表示法访问该属性,如下所示:total['ga:newVisits']这样您的完整代码将是{{total['ga:newVisits']}}. 现场演示在这里(点击)。

关于括号表示法的另一个不错的功能是它允许您使用变量名称作为属性:

var myObj {
  bar: '123'
};
var foo = 'bar';

console.log(myObj[foo]); //logs '123'
我删除了我之前的评论。你是 100% 正确的。谢谢你不仅回答,而且详细解释!
2021-03-17 19:36:11
@VSack 好的,很高兴它成功了!我做了这个以防万一它有帮助:jsbin.com/OPOyeXOS/2/edit Stack Overflow 不仅仅是修复错误,更适合学习,所以我总是试图让我的答案成为一个教学机会。谢谢欣赏!!
2021-04-09 19:36:11

您需要像访问关联数组一样访问它:

{{total['ga:newVisits']}}