How to get a type of scope variable in Angular expression?

Question

Let's define simple boolean on the scope:

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

mymodal.controller('MainCtrl', function ($scope) {
    $scope.b = false;
});

How can I get type of a variable in the expression? typeOf and Object.prototype.Tostring.call don't work.

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

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

Community · Accepted Answer · 2017-05-23 12:31:55Z

18

i think the best way is to create a custom filter and use it as you wish within you expression, you can check this link that use for get the Object.keys of an object

for your case you can use

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Mar 8, 2016 at 9:07

Zamboney

2,00712 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arkadiusz Kałkus Over a year ago

Great idea! Simple and robust. I like it.

Matt Goodrich Over a year ago

Why hasn't this been built into Angular? Maybe it already has in Angular 2. Doesn't look like it though stackoverflow.com/questions/37511055/….

Arkadiusz Kałkus · Accepted Answer · 2016-03-08 09:30:01Z

Just to show Zamboney's answer applied 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's a number
    </div>
    <div ng-if="(b | getType) == 'boolean'">
      It's a boolean
    </div>
  </div>
</div>

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

dfsq · Accepted Answer · 2016-03-08 08:57:06Z

4

You can't do it and for the good reason: Angular expression parser disallows such sort of things in the templates.

If you really want to be able to do so, I recommend to explicitly set helper methods on the $rootScope so it will be available in all your templates:

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

You can even reference Angular own 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 templates.

answered Mar 8, 2016 at 8:57

dfsq

193k26 gold badges244 silver badges261 bronze badges

5 Comments

Arkadiusz Kałkus Over a year ago

This is great answer and thank you very much. But Zamboney's idea to create filter is to me better. Anyway - thanks again.

dfsq Over a year ago

Actually, filter in this case is very bad idea, due to at least 2 reasons, but whatever is better for you.

Arkadiusz Kałkus Over a year ago

What are disadvantages?

dfsq Over a year ago

Filters are not very performant. Then how are you going to use it in ngIf for example? You can but this is clumsy.

Arkadiusz Kałkus Over a year ago

When it comes to the usage I thought about this question: stackoverflow.com/questions/35862140/… . What's the second reason?

georgeawg · Accepted Answer · 2016-03-08 09:04:09Z

1

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

answered Mar 8, 2016 at 9:04

georgeawg

49k13 gold badges77 silver badges98 bronze badges

Comments

Ionut Necula · Accepted Answer · 2016-03-08 09:18:26Z

1

Try something like this in the controller(I don't think is possible directly in the expression as 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>

edited Mar 8, 2016 at 9:18

answered Mar 8, 2016 at 8:49

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

4 Comments

Arkadiusz Kałkus Over a year ago

I don't want to do it in a controller. I want to execute typeof in expression. Also in ng-if or ng-show/ng-hide directives.

Ionut Necula Over a year ago

First, you have to do it in the controller then you return it to the expression.

Arkadiusz Kałkus Over a year ago

Shouldn't this rather return string than calling alert?

Ionut Necula Over a year ago

You can use return method instead of alert then. Important thing is that it's working. See updated answer.

Jai · Accepted Answer · 2016-03-08 09:01:35Z

As you are trying to access the type typeof of the specific value and in the current code you are doing this in the view which is quite late for such operation.

Instead you can make a function in the controller's scope and just 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>

Rao · Accepted Answer · 2016-08-24 09:00:54Z

0

$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 type of the typeof operator: http://bonsaiden.github.io/JavaScript-Garden/#types.typeof

edited Aug 24, 2016 at 9:00

Rao

21.4k12 gold badges63 silver badges80 bronze badges

answered Aug 24, 2016 at 8:37

anarchist

234 bronze badges

Collectives™ on Stack Overflow

How to get a type of scope variable in Angular expression?

7 Answers 7

2 Comments

Comments

5 Comments

Comments

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

5 Comments

Comments

4 Comments

Comments

Comments

Linked

Related