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/

score 18 · Accepted Answer · edited May 23 '17 at 12:31

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 '17 at 12:31

Community

1
1

answered Mar 08 '16 at 09:07

Zamboney

2,002
12
22

Great idea! Simple and robust. I like it. – Arkadiusz Kałkus Mar 08 '16 at 09:20
1

Why hasn't this been built into Angular? Maybe it already has in Angular 2. Doesn't look like it though http://stackoverflow.com/questions/37511055/how-to-check-type-of-variable-in-ngif-in-angular2. – Matt Goodrich Mar 09 '17 at 21:00

score 7 · Answer 2 · answered Mar 08 '16 at 09:30

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/

score 4 · Answer 3 · answered Mar 08 '16 at 08:57

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 08 '16 at 08:57

dfsq

191,768
25
236
258

This is great answer and thank you very much. But Zamboney's idea to create filter is to me better. Anyway - thanks again. – Arkadiusz Kałkus Mar 08 '16 at 09:22
Actually, filter in this case is very bad idea, due to at least 2 reasons, but whatever is better for you. – dfsq Mar 08 '16 at 09:43
What are disadvantages? – Arkadiusz Kałkus Mar 08 '16 at 09:56
Filters are not very performant. Then how are you going to use it in ngIf for example? You can but this is clumsy. – dfsq Mar 08 '16 at 10:26
When it comes to the usage I thought about this question: http://stackoverflow.com/questions/35862140/angularjs-change-input-type-dynamically/35862384 . What's the second reason? – Arkadiusz Kałkus Mar 08 '16 at 11:59

Ionut Necula · Answer 4 · 2016-03-08T09:18:26.913

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 08 '16 at 09:18

answered Mar 08 '16 at 08:49

Ionut Necula

11,107
4
45
69

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. – Arkadiusz Kałkus Mar 08 '16 at 08:51
First, you have to do it in the controller then you return it to the expression. – Ionut Necula Mar 08 '16 at 09:04
Shouldn't this rather return string than calling alert? – Arkadiusz Kałkus Mar 08 '16 at 09:15
You can use return method instead of alert then. Important thing is that it's working. See updated answer. – Ionut Necula Mar 08 '16 at 09:17

score 0 · Answer 5 · answered Mar 08 '16 at 09:01

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>

score 0 · Answer 6 · answered Mar 08 '16 at 09:04

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

score 0 · Answer 7 · edited Aug 24 '16 at 09:00

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 '16 at 09:00

Rao

20,781
11
57
77

answered Aug 24 '16 at 08:37

anarchist

23
4

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

7 Answers7

Linked