CODEWITHSUNDEEP
javascriptangularjsobjectequality
David says Reinstate Monica
David says Reinstate Monica

Reputation: 20129

Does angular.equals() work as an angular expressions?

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.

Upvotes: 6

Views: 11780

Answers (4)

Bennie Krijger
Bennie Krijger

Reputation: 595

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>

Upvotes: 6

Blazemonger
Blazemonger

Reputation: 92963

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>

Upvotes: 4

Philipp Gayret
Philipp Gayret

Reputation: 5070

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.

Upvotes: 10

Viktor
Viktor

Reputation: 257

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.

Upvotes: -1

Related Questions