I'm trying to display a div if an object is non-empty. Using this answer, Im trying to use angular.equals to check emptyness, but its not behaving as expected

var test = angular.module('test',[]);

test.controller('testCtrl', ['$scope', function($scope){
  $scope.foo={};
  $scope.bar="bam"
}]);

<script src=".2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="testCtrl">
    <div ng-show="!angular.equals(foo,{})">{{bar}}</div>
  </div>
</div>

I'm trying to display a div if an object is non-empty. Using this answer, Im trying to use angular.equals to check emptyness, but its not behaving as expected

var test = angular.module('test',[]);

test.controller('testCtrl', ['$scope', function($scope){
  $scope.foo={};
  $scope.bar="bam"
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="testCtrl">
    <div ng-show="!angular.equals(foo,{})">{{bar}}</div>
  </div>
</div>

The expectation here is that the value of bar will only show if foo is not equal to an empty object. However, foo is clearly set to {} and yet bar still shows.

• javascript
• angularjs
• object
• equality

4 Answers 4

If you want to access the angular object from templates or expressions, you have to make it available on the scope of where you want to use it. In this case you can put it on the testCtrl's scope.

var test = angular.module('test',[]);

test.controller('testCtrl', ['$scope', function($scope){
  $scope.angular = angular;
  $scope.foo={};
  $scope.bar="bam"
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="testCtrl">
    <div ng-show="!angular.equals(foo,{})">{{bar}}</div>
  </div>
</div>

I generally put utility objects on $rootScope, so they're available from everywhere.

A cleaner way would be to only add the angular equals method to the $scope:

var test = angular.module('test',[]);

test.controller('testCtrl', ['$scope', function($scope){
   $scope.angularEquals = angular.equals;
}

Then you can use the equals method in the template, like:

<div ng-show="!angularEquals(foo,{})">{{bar}}</div>

Your view is looking for a function on the scope, and $scope.angular.equals does not exist. You need to write one like this:

var test = angular.module('test', []);

test.controller('testCtrl', ['$scope',
  function($scope) {
    $scope.foo = {};
    $scope.bar = "bam";
    $scope.isEmpty = function(obj) {
      return angular.equals(obj,{});
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="testCtrl">
    <div ng-hide="isEmpty(foo)">{{bar}}</div>
  </div>
</div>

Angular functions can't be used inline, AFAIK. You could do the equal check with a function inside the controller instead and return the result.