example - Probar si un objeto es un objeto vacío en una plantilla AngularJS

ng-if ejemplos

Question

Tengo un objeto simple en un controlador que a veces puede estar vacío ( {} ).

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

  vm.testObject = {};
});

Quiero ocultar o mostrar algunos elementos DOM en la plantilla correspondiente cuando el objeto está vacío o no.

Intenté hacerlo con un simple <div ng-if="vm.testObject"> pero cuando vm.testObject === {} se considera true en 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>

¿Hay una forma sencilla de verificar si hay un objeto vacío en la plantilla? Preferiblemente sin agregar nuevas variables al alcance.

Aquí hay un Plunker que funciona: http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

Answer 1

¿Estás de acuerdo con mover el control de igualdad al 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>

De lo contrario, proporcionar un ayudante en el alcance

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

  vm.testObject = {};

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

entonces

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

Answer 2

Debe utilizar un filtro AngularJs:

Javascript:

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

Plantilla 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 actualizado: http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview

Answer 3

Este es un hilo antiguo, pero me resulta más fácil verificar si el Objeto tiene claves.

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

Es simple y legible.

Answer 4

Esto funcionará. comprobar la longitud

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