So I have a variable which could be of any type. By type I mean it could be a string, or an object. I'm trying to run different code depending on the type.

My variable is named range, it's defined in the JavaScript. What I've tried is. vars is an object which I'm looping through.

<tr ng-repeat="(key, range) in vars">
    <td ng-switch="typeof range">
        <span ng-switch-when="string">It's a string</span>
        <span ng-switch-when="object">It's an object</span>
        <span ng-switch-default>It's something else</span>
    </td>
</tr>

but this will throw an invalid expression error. What's the best way to do this?

So I have a variable which could be of any type. By type I mean it could be a string, or an object. I'm trying to run different code depending on the type.

My variable is named range, it's defined in the JavaScript. What I've tried is. vars is an object which I'm looping through.

<tr ng-repeat="(key, range) in vars">
    <td ng-switch="typeof range">
        <span ng-switch-when="string">It's a string</span>
        <span ng-switch-when="object">It's an object</span>
        <span ng-switch-default>It's something else</span>
    </td>
</tr>

but this will throw an invalid expression error. What's the best way to do this?

• javascript
• html
• angularjs
• angularjs-ng-repeat
• ng-switch

• In Controller $scope.type = typeof $scope.range; and in view <td ng-switch="type">. Let me know if this helps. – Tushar Commented Oct 24, 2015 at 16:41
• @Tushar problem is this is in an ng-repeat so I don't think I can do that. Let me clarify – Downgoat Commented Oct 24, 2015 at 16:42

2 Answers 2

try this... I also added detection for different types of variables: string, array, object, number, null, and undefined.

"use strict";
angular.module('myApp', [])
.controller("myController", function() {
    this.vars = {
        key1: "String",
        key2: "String2",
        key3: 42,
        key4: {
            name: "Mr. Anderson"
        },
        key5: [1, 2, 3, 4, 5],
        key6: null,
        key7: undefined
    };
    this.getTypeOf = function(value) {
        if(value === null) {
            return "null";
        }
        if(Array.isArray(value)) {
            return "array";
        }
        return typeof value; 
    };
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<table ng-app="myApp" ng-controller="myController as ctrl">
    <tr ng-repeat="(key, range) in ctrl.vars">
        <td ng-switch="ctrl.getTypeOf(range)">
            <div ng-switch-when="string">It's a string</div>
            <div ng-switch-when="object">It's an object</div>
            <div ng-switch-when="number">It's a number</div>
            <div ng-switch-when="array">It's an array</div>
            <div ng-switch-when="null">It's null</div>
            <div ng-switch-when="undefined">It's undefined</div>
            <div ng-switch-default>It's something else</div>
        </td>
    </tr>
</table>

Controller:

$scope.checkType = function(obj){    
 return typeof obj;
};

Html:

 <tr ng-repeat="(key, range) in vars"
        <td ng-switch="checkType(range)">
            <span ng-switch-when="string">It's a string</span>
            <span ng-switch-when="object">It's an object</span>
            <span ng-switch-default>It's something else</span>
        </td>
    </tr>