Testen, ob ein Objekt ein leeres Objekt in einer AngularJS-Vorlage ist

Question

Ich habe ein einfaches Objekt in einem Controller, das manchmal leer sein kann ({}).

Ich möchte einige DOM-Elemente in der entsprechenden Vorlage ausblenden oder anzeigen, wenn das Objekt leer ist oder nicht.

Ich versuchte es mit einer einfachen <div ng-if="vm.testObject"> zu tun, aber wenn vm.testObject === {} es true im ng-if betrachtet wird.

Gibt es eine einfache Möglichkeit, nach einem leeren Objekt in der Vorlage zu suchen? Vorzugsweise ohne neue Variablen zum Scope hinzuzufügen.

Hier ist ein funktionierendes Plunker: http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

Answer 1

Sind Sie in Ordnung, mit der Gleichheitsprüfung auf die ng-if bewegen?

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

Ansonsten bieten einen Helfer auf den Umfang

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

    vm.testObject = {}; 

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

dann

<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

Sie einen AngularJS Filter verwenden sollten:

Javascript:

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

HTML-Vorlage:

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

Aktualisiert plunkr: http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview

Answer 3

Dies funktioniert. Überprüfen Sie die Länge

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