无法在 angularjs 中调用 Object.keys答案

【问题标题】：Unable to call Object.keys in angularjs无法在 angularjs 中调用 Object.keys
【发布时间】：2014-10-07 14:18:51
【问题描述】：

我正在使用 UI.Bootstrap 手风琴，并且我已经像这样定义了我的标题：

<accordion-group ng=repeat="(cname, stations) in byClient">
    <accordion-heading>
        {{ cname }} <span class="pull-right"> {{ Object.keys(stations).length }} Stations</span>
    </accordion-heading>

当显示 Object.keys(stations).length 时解析为空。如果我在我的控制器中放入相同长度的调用，我会得到预期的计数。有什么东西阻止方法调用在 AngularJS 中工作？

使用stations 的手风琴的其余部分按预期运行，因此我知道它已正确填充。 byClient 数据结构基本上是这样的：

{
    "Client Name" : {
        "Station Name": [
            {...},
            {...}
        ]
    }
 }

【问题讨论】：

试试{{ (stations | keys).length }} stations

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

是的，那是因为 Object 是 window/global 的一部分，并且 angular 无法根据范围评估该表达式。当您在绑定角度中指定Object.keys 时，尝试根据$scope 对其进行评估，但找不到它。您可以将object.keys 的引用存储在rootScope 中的某个实用程序中，并在应用程序的任何位置使用它。

类似这样的：-

angular.module('yourApp',[deps...]).run(function($rootScope){
  //Just add a reference to some utility methods in rootscope.
  $rootScope.Utils = {
     keys : Object.keys
  }

  //If you want utility method to be accessed in the isolated Scope 
  //then you would add the method directly to the prototype of rootScope 
  //constructor as shown below in a rough implementation.

  //$rootScope.constructor.prototype.getKeys = Object.keys;

});

并将其用作：-

<span class="pull-right"> {{ Utils.keys(stations).length }} Stations</span>

这将可用于除独立作用域之外的任何子作用域。如果您打算在隔离作用域上执行此操作（例如：- 隔离作用域指令），则需要在作用域上添加 Object.keys 的引用，或者当您在作用域上公开一个将返回长度的方法时。

或者更好的是，创建一个格式过滤器来返回密钥长度并在任何地方使用它。

app.filter('keylength', function(){
  return function(input){
    if(!angular.isObject(input)){
      throw Error("Usage of non-objects with keylength filter!!")
    }
    return Object.keys(input).length;
  }
});

然后做：-

{{ stations | keylength }}

Demo

【讨论】：

正如我所说的那样 +1
非常好。你给出了两个完美的解决方案！谢谢:)
如果您使用的是隔离作用域，则需要使用{{ $root.Utils.keys(stations).length }}
@AJRichardson 您在此处提出的观点非常好。您可以做的不是将其添加到 rootScope 实例中，而是将其添加到原型中。即$rootScope.constructor.prototype.getKeys = Object.keys。然后它也应该在隔离范围内可用。类似于我所做的here
为什么这在 Angular 中默认不存在，非常有用！

【解决方案2】：

使用函数确定对象属性的数量：

$scope.keyLength = function (obj) {
    return Object.keys(obj).length;
}

并使用：

{{ keyLength(myObj) }}

【讨论】：

【解决方案3】：

我认为 过滤器 是 AngularJS 在模板代码中处理结构的最常用方式：

angular.module('app.filters').filter('objectKeysLength', [function() {
    return function(items) {
        return Object.keys(items).length;
    };
}]);

angular.module('app.filters').filter('objectKeys', [function() {
    return function(item) {
        if (!item) return null;
        var keys = Object.keys(item);
        keys.sort();
        return keys;
    };
}]);

【讨论】：

【解决方案4】：

如果有人搜索 angular 2 和更高的解决方案。它现在拥有keyvalue 管道，可用于对对象进行交互

【讨论】：

【解决方案5】：

我无法在 AngularJS 1.6 中获得任何其他答案。什么对我有用使用$window 访问Object.keys 像这样$window.Object.keys({ 'a': 1, 'b': 2 })

【讨论】：