javascript - Angular 函数调用在 IE 浏览器中不起作用

Question

我最近开始研究 UI。所以我在 html 中使用 angularjs。我对 Internet Explorer CSS 样式有一个疑问。我正在使用 Angular 调用来根据字段值决定 div 的背景颜色。它在 chrome 和 firefox 中运行良好。但在 IE 中它给出了一些错误，如下所示

这是我的 HTML 代码

<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">

这是我的 Angular 函数

$scope.get_color = function(val){

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

知道我错过了什么吗？

Answer 1

您的 background-color 设置为 {{get_color(system.status)} 的 Angular 表达式，但它应该是 {{get_color(system.状态)}}。请注意末尾缺少的 }。

尝试将您的 HTML 更改为:

<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">

然后在您的 get_color 函数中，执行如下操作:

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

总而言之，使用 ng-style 并让您的函数返回一个包含您要使用的样式的对象。