CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeatng-switch
Downgoat
Downgoat

Reputation: 14371

ng-switch with typeof expression

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?

Upvotes: 3

Views: 2908

Answers (2)

Eric
Eric

Reputation: 6352

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>

Upvotes: 5

Praveen Prasannan
Praveen Prasannan

Reputation: 7133

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>

Upvotes: 1

Related Questions