检查AngularJS模板中的对象大小，做错了吗？

Question

我想在AngularJS模板中迭代myObject

这不起作用：

<ul ng-if="Object.keys(myObject).length">
    <li ng-repeat="(key, val) in myObject">
        Value at key {{ key }} is: {{ val }}
    </li>
</ul>

我怀疑没有出现任何内容，因为$scope.Object未定义。

相反，我这样做了：

在控制器/指令中：

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

在模板中：

<ul ng-if="sizeOf(myObject)">
    <li ng-repeat="(key, val) in myObject">
        Value at key {{ key }} is: {{ val }}
    </li>
</ul>

我不喜欢这个解决方案，因为在每个控制器或指令$scope中重复了这个功能。

您是否看到任何更清洁的解决方案？

谢谢！

Answer 1

您可以在Object指令中随处使用ngIf。只需将其引用引用到根范围：

app.run(function($rootScope) {
    $rootScope.Object = Object;
});

它也可以在隔离范围内使用，例如指令。

<强> UPD 即可。在最新版本的Angular中，您无法再在表达式中引用Object。在这种情况下，您需要单独引用方法：

app.run(function($rootScope) {
    $rootScope.keys = Object.keys;
});

然后使用此功能：

ng-if="keys(myObject).length"

Answer 2

在您的控制器中，添加此行

$scope.Object = Object;

然后你应该可以像你所做的那样在你的模板中使用Object.XXX。

Answer 3

这不够吗？

<ul ng-if="myObject">
  <li ng-repeat="(key, val) in myObject">
      Value at key {{ key }} is: {{ val }}
  </li>
</ul>

该指令负责处理null，undefined，空对象。 Plunkr用于演示。尝试将对象修改为undefined，null或使用值填充。