ng-class if browser is not internet explorer

Question

I have an issue, i want to add a css class to an item only if the browser isn't internet explorer.

Can I do that with Angular JS?

something like:

<div ng-class="myClass : "BROWSER IS IE" ? default"><div>

SOLUTION:

HTML:

       <div data-ng-class="getClass()"></div>

JAVASCRIPT:

        $scope.isIe = function () {
            return false || !!document.documentMode;
        }

        $scope.getClass = function () {
            if ($scope.isIe()) {
                return "";
            }
            else {
                return "yourClass1 yourClass2 yourClass3";
            }
        }

this link http://stackoverflow.com/questions/22947535/how-to-detect-browser-using-angular would help you to how to find browser and then use `ng-class` with method — Pankaj Parkar, Jul 28 '15 at 14:27

user3357118 · Accepted Answer · 2015-07-28T15:20:10.550

5

You could assign the class via a function like:

data-ng-class="getClass()"

In getClass() implement functionality to detect IE and return the empty string if it is detected, but return a space separated list of class name(s) if it is not. Something like:

EDIT: add function isIe based on comment by @jsonmurphy

function isIe() {
  return false || !!document.documentMode;
}

$scope.getClass = function() {
  if(isIe()) {
    return "";
  }
  else {
    return "className1 className2 ... ";
  }
}

edited Jul 28 '15 at 15:20

answered Jul 28 '15 at 14:19

user3357118

844
7
14

and how wold you define the isIe() function? this is actually my question – xechelonx Jul 28 '15 at 14:29
1

The answer from @jsonmurphy is one way, or the link I have in my answer to parse the user agent is another. You would do best to use a highly rated method(like the one linked by @jsonmurphy) and just wrap the portion you need to detect IE. Like `function isIe() { return false || !!document.documentMode; }` – user3357118 Jul 28 '15 at 14:39
ok so I did as you suggested: $scope.isIe = function () { return false || !!document.documentMode; } $scope.getClass = function () { if (isIe()) { return ""; } else { return "form-panel input-lg"; } } – xechelonx Jul 28 '15 at 14:56
I didn't scope `isIe`. If you want it scoped change the call in `getClass()` to match as `if($scope.isIe())` – user3357118 Jul 28 '15 at 15:00

score 1 · Answer 2 · edited May 23 '17 at 11:58

The popular/standard approach to styling for IE is to use conditional comments. In any case, this question might be of interest to you. Specifically:

var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6

Note: isIE will only detect 6 - 11, not its successor, Edge.

So in your case it might be:

<div ng-class="{myClass : (false || !!document.documentMode), default: !document.documentMode}"><div>

Hope that helps.

ng-class if browser is not internet explorer

2 Answers2

Linked