How to get the type of a scope in an angular expression?

Question

Let me define a simple Boolean scale:

var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.b = false; }); 

How can I get the type of a variable in an expression? typeOf and Object.prototype.Tostring.call do not work.

 <div ng-controller="MainCtrl" class="container"> <div> {{ b }} {{ typeOf(b) }} {{ Object.prototype.toString.call(b) }} </div> </div> 

Here's the JSFiddle: http://jsfiddle.net/g8Ld80x3/2/

Answer 1

I think the best way is to create a custom filter and use it as you wish in your expression, you can check this link, which is used to get the object. object keys

for your case you can use

 angular.module('customfilter', []).filter('typeof', function() { return function(obj) { return typeof obj }; }); 

Answer 2

You cannot do this for a good reason either: Angular's parser expression forbids such things in templates.

If you really want to do this, I recommend explicitly setting the helper methods in $rootScope so that it is available in all of your templates:

 mymodal.run(function($rootScope) { $rootScope.typeOf = function(value) { return typeof value; }; }); 

You can even reference your own Angular utility methods:

  mymodal.run(function($rootScope) { ['isArray', 'isDate', 'isDefined', 'isFunction', 'isNumber', 'isObject', 'isString', 'isUndefined'].forEach(function(name) { $rootScope[name] = angular[name]; }); }); 

and use {{ isArray(arr) }} in the templates.

Answer 3

Just to show the Zamboney answer applicable to my sample code:

Controller:

 angular.module('customfilter', []).filter('getType', function() { return function(obj) { return typeof obj }; }); var mymodal = angular.module('mymodal', ['customfilter']); mymodal.controller('MainCtrl', function ($scope) { $scope.b = false; }); 

View:

 <div ng-controller="MainCtrl" class="container"> <div> {{ b }} {{ b | getType }} <div ng-if="(b | getType) == 'number'"> It a number </div> <div ng-if="(b | getType) == 'boolean'"> It a boolean </div> </div> </div> 

And the fiddle: http://jsfiddle.net/g8Ld80x3/5/

Answer 4

Try something like this in the controller (I don't think this is possible directly in the expression you want to do):

 var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.b = false; $scope.getBType = function(test){ return( typeof test); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='mymodal' ng-controller="MainCtrl" class="container"> <div> {{ getBType(b) }} </div> </div> 

Answer 5

As you try to access the typeof certain value in the current code, you do this in view , which is pretty late for such an operation.

Instead, you can make a function in the controller area and simply return it from there:

 var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.b = false; $scope.getTypeof = function(it){ return typeof(it); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='mymodal' ng-controller="MainCtrl" class="container"> <div> {{ b }} : {{ getTypeof(b) }} </div> </div> 

Answer 6

HTML

 <div ng-controller="MainCtrl" class="container"> <div> {{ b }}<br> {{ typeOf(b) }}<br> </div> </div> 

Js

 var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.b = false; $scope.typeOf = function (v){ return (typeof v)}; }); 

RESULT

 false boolean 

Answer 7

 $scope.b = new String('name'); 

// according to the above statement, the object will be the result of the typeof operator. It does not check the typeof operator typeof: http://bonsaiden.imtqy.com/JavaScript-Garden/#types.typeof