ng-switch with typeof expression

Question

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?

In Controller `$scope.type = typeof $scope.range;` and in view ``. Let me know if this helps. — Tushar, Oct 24 '15 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, Oct 24 '15 at 16:42

Eric · Accepted Answer · 2015-10-24T17:14:32.553

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.com/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>

score 1 · Answer 2 · answered Oct 24 '15 at 16:45

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>

ng-switch with typeof expression

2 Answers2