How do I debug/dump a value from an ng-bind {{ }} Angular expression?

The recommended way is to use AngularJS's logging service $log. First you need to inject the service into your controller and assign it to a scope variable like so:

app.controller('MyCntrl', function($log){
    $scope.$log = $log;

Then in your template, us it like ay other function:

<span>{{$log.log(value}}</span>

If you want to be able to use typeof, it works basically the same way:

$scope.getTypeOf = function(val){ return typeof val; };

<span>{{getTypeOf(val)}}</span>

The built-in JsonPipe might be easier...

{{ object | json }}

See: https://angular.io/api/common/JsonPipe


You can add a custom filter for debugging purposes:

app.filter('debug', function() {
  return function(input) {
    if (input === '') return 'empty string';
    return input ? input : ('' + input);
  };
});

Usage:

{{ value | debug }}

Demo: http://plnkr.co/edit/U44BCjBhgsFedRkHASlc?p=preview

Tags:

Angularjs