Test if an object is an empty object in a AngularJS template

Question

I have a simple object in a controller which can sometimes be empty ({}).

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

I want to hide or show some DOM-elements in the corresponding template when the object is empty or not.

I tried to do it with a simple <div ng-if="vm.testObject"> but when vm.testObject === {} it is considered true in the 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> 

Is there a simple way to check for an empty object in the template? Preferably without adding new variables to the scope.

Here is a working Plunker: http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

Answer 1

You should use an AngularJs filter:

Javascript:

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

Html template:

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

Are you ok with moving the equality check to the 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> 

Otherwise, provide a helper on the scope

app.controller('TestController', function() {   var vm = this;    vm.testObject = {};    vm.empty = function() {       return vm.testObject === {};   }; }); 

then

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