CODEWITHSUNDEEP
javascriptangularjstypes
Arkadiusz Kałkus
Arkadiusz Kałkus

Reputation: 18381

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

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/

Upvotes: 15

Views: 50264

Answers (7)

anarchist
anarchist

Reputation: 23

$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

Upvotes: 0

Arkadiusz Kałkus
Arkadiusz Kałkus

Reputation: 18381

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/

Upvotes: 7

Ionut Necula
Ionut Necula

Reputation: 11482

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>

Upvotes: 1

Zamboney
Zamboney

Reputation: 2010

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
  };
});

Upvotes: 18

georgeawg
georgeawg

Reputation: 48968

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

Upvotes: 1

Jai
Jai

Reputation: 74738

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>

Upvotes: 0

dfsq
dfsq

Reputation: 193271

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.

Upvotes: 4

Related Questions