无法在 angularjs 中调用 Object.keys

Question

我正在使用 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": [
            {...},
            {...}
        ]
    }
 }

Answer 1

是的，那是因为Object是window/global的一部分，而 angular 无法针对范围评估该表达式。 当您在绑定中指定Object.keys ，angular 尝试根据$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 }}

演示

Answer 2

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

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

并使用：

{{ keyLength(myObj) }}

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

Answer 4

如果有人搜索 angular 2 和更高的解决方案。 现在帽子键值管，它可以用来interate了对象

Answer 5

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

Answer 6

这是一个对我有用的解决方案：

export class xyzcomponent{
    Key = Object.keys;
}