Проверьте размер объекта в шаблоне AngularJS, не так ли?

Я хочу выполнить итерацию через myObject в шаблоне AngularJS

Это не работает:

<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.

Вы видите какое-нибудь более чистое решение?

Спасибо!

Ответ 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"

Ответ 2

В вашем контроллере добавьте эту строку

$scope.Object = Object;

Затем вы должны иметь возможность использовать Object.XXX в своем шаблоне, как то, что вы сделали.

Ответ 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 или заполнить значением.