Sprawdź, czy obiekt jest pustym obiektem w szablonie AngularJS

Question

Mam prosty obiekt w kontrolerze, który czasami może być pusty ({}).

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

    vm.testObject = {}; 
}); 

Chcę ukryć lub pokazać niektóre elementy DOM w odpowiednim szablonie, gdy obiekt jest pusty lub nie.

Próbowałem zrobić to z prostym <div ng-if="vm.testObject">, ale gdy vm.testObject === {} jest uważany za true w 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> 

Czy istnieje prosty sposób sprawdzenia pustego obiektu w szablonie? Najlepiej bez dodawania nowych zmiennych do zakresu.

Oto Plunker pracy: http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

Answer 1

Czy jesteś ok z ruchomymi sprawdzanie równości do 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> 

Inaczej zapewnić pomocnika zakresu

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

    vm.testObject = {}; 

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

następnie

<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

należy użyć angularjs filtr:

javascript:

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

szablonu HTML:

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

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

Answer 3

to będzie działać. sprawdź długość

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