Проверьте, является ли объект пустым объектом в шаблоне AngularJS

У меня есть простой объект в контроллере, который иногда может быть пустым ({}).

app.controller('TestController', function() {
  var vm = this;

  vm.testObject = {};
});

Я хочу скрыть или показать некоторые DOM-элементы в соответствующем шаблоне, когда объект пуст или нет.

Я попытался сделать это с помощью простого <div ng-if="vm.testObject">, но когда vm.testObject === {} считается true в ng-if.

<div ng-controller="TestController as vm">
  <div ng-if="vm.testObject">
    Test Object is not empty
  </div>
  <div ng-if="!vm.testObject">
    Test Object is empty
  </div>
</div>

Есть ли простой способ проверить пустой объект в шаблоне? Предпочтительно без добавления новых переменных в область видимости.

Вот рабочий плункер: http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

Ответы

Ответ 1

Согласны ли вы с переводом проверки равенства на ng-if?

<div ng-controller="TestController as vm">
  <div ng-if="!equals({}, vm.testObject)">
    Test Object is not empty
  </div>
  <div ng-if="equals({}, vm.testObject)">
    Test Object is empty
  </div>
</div>

В противном случае укажите помощника в области

app.controller('TestController', function() {
  var vm = this;

  vm.testObject = {};

  vm.empty = function() {
      return vm.testObject === {};
  };
});

затем

<div ng-controller="TestController as vm">
  <div ng-if="!vm.empty()">
    Test Object is not empty
  </div>
  <div ng-if="vm.empty()">
    Test Object is empty
  </div>
</div>

Ответ 2

Вы должны использовать фильтр AngularJs:

JavaScript:

app.filter('isEmpty', [function() {
  return function(object) {
    return angular.equals({}, object);
  }
}])

Шаблон HTML:

<div ng-if="!(vm.testObject | isEmpty)">
  Test Object is not empty
</div>
<div ng-if="vm.testObject | isEmpty">
  Test Object is empty
</div>

Обновлен plunkr: http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview

Ответ 3

Это сработает. проверьте длину

<div ng-if="!!vm.testObject && vm.testObject.length > 0">
  Test Object is not empty
</div>

Ответ 4

Это старая ветка, но мне проще проверить, есть ли у объекта ключи.

<div ng-controller="TestController as vm">
  <div ng-if="Object.keys(vm.testObject).length">
    Test Object is not empty
  </div>
  <div ng-if="!Object.keys(vm.testObject).length">
    Test Object is empty
  </div>
</div>

Это просто и читабельно.