Angular function call not working in IE browser

Question

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

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?

Dr. Cool · Accepted Answer · 2016-08-19 18:56:26Z

1

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.

edited Aug 19, 2016 at 18:56

answered Aug 19, 2016 at 18:24

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

newbie Over a year ago

I have added my html code. Please check and I have two curly brackets at the end and I don't have any idea why it is missing while rendering in the browser. I did not notice that till now. And the same code is working fine in other browsers like chrome and firefox where it is rendering the second curly brace also

newbie Over a year ago

How should the html be like?? And I have added my angular function. What change should I have to do?

Dr. Cool Over a year ago

sorry, the HTML was hidden... check it again.

newbie Over a year ago

It worked!!! Thanks :) But what is the reason that it didn't work when I used like I mentioned?

Dr. Cool Over a year ago

Honestly, I have no idea. That's a weird problem that I've never heard of before. Luckily, with Angular there's usually always another way to do something.

Collectives™ on Stack Overflow

Angular function call not working in IE browser

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related