angularjsangularjs-templates

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


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


Solution

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