newbie newbie - 3 months ago 7
AngularJS Question

Angular function call not working in IE browser

I recently started working on UI. So I am using angularjs with html. I have one doubt regarding Internet Explorer css styling. I am using a angular call to decide a background color of a div based on a field value. It is working fine in chrome and firefox. But in IE it is giving some error as below

enter image description here

enter image description here

This is my HTML code

<div class="row" style="border-bottom: 1px solid black; border-top: 1px solid black; padding-top: 5px; padding-bottom: 5px;margin-right:5px;margin-left:5px; margin-bottom: 5px; margin-top: 5px; clear: both; background-color: {{get_color(system.status)}}; position: relative">


This is my angular function

$scope.get_color = function(val){

if (val == '0'){
return 'rgb(245,215,215)';
}
else{
return 'rgba(211,211,211,0)';
}
}


Any Idea what am I missing?

Answer

Your background-color is set to an Angular expression of {{get_color(system.status)} but it should be {{get_color(system.status)}}. Notice the missing } at the end.

Try changing your HTML to this:

<div class="row" ng-style="get_color(system.status)" style="border-bottom: 1px solid black; border-top: 1px solid black; padding-top: 5px; padding-bottom: 5px;margin-right:5px;margin-left:5px; margin-bottom: 5px; margin-top: 5px; clear: both; position: relative">

And in your get_color function, do something like this:

$scope.get_color = function(val){
    if (val == '0'){    
        return { "background-color": 'rgb(245,215,215)' };
    }
    else{
        return { "background-color": 'rgb(211,211,211,0)' };
    }
}

To summarize, use ng-style and have your function return an object containing the style(s) you want to use.

Comments