Javascript 有条件地应用ng类

我根据一些条件显示图像（即，如果满足条件1，则显示图像1；如果满足条件2，则显示图像2，依此类推）。 我正在使用

ng if

。我的代码如下所示：

我只显示了一个图像，但我仍然要写3行代码。

---

如何在此处使用

ng class

以最小化编写的代码？

使用ng src动态更改图像的src，那么您只需要一次代码：）

编辑

正如评论中所指出的，如果在页面上的多个页面上使用此选项，则不起作用。因此，这里有一个替代方案

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 form-col-pad customization-grid-data text-left"> 
    <img ng-src="{{ getSeverity(data.severity) }}"> 
</div>

-

作为引导代码的一个离题说明，作为一个建议，您实际上可能会在div中丢失很多类，特别是col-sm-1及以上。col-xs-1将适用于sm/md/lg

<div class="col-xs-1 form-col-pad customization-grid-data text-left"> 

HTML

或

HTML中的属性

ng-class="{'low':data.severity == 1,'medium':data.severity == 2,'high':data.severity == 3}"

ng-class="getSeverityClass(data)"

示例CSS

.low {
    background: green;
}

.medium {
    background: yellow;
}

.high {
    background: red;
}

或

HTML中的属性

ng-class="{'low':data.severity == 1,'medium':data.severity == 2,'high':data.severity == 3}"

ng-class="getSeverityClass(data)"

控制器中的JavaScript

$scope.getSeveritySrc = function(data){
    var src = 'App/images/Icons/alarm-';
    switch(data.severity){
        case 1:
            src += 'low';
        break;
        case 2:
            src += 'medium';
        break;
        default:
            src += 'high';
        break;
    }
    src += '.png';
    return src;
}

$scope.getSeverityClass = function(data){
    switch(data.severity){
        case 1:
            return 'low';
        break;
        case 2:
            return 'medium';
        break;
        default:
            return 'high';
        break;
    } 
}

---

要显示这一点，使用多个

数据

另一种选择是使用ng开关：

<span ng-switch on="data.severity">
   <img ng-switch-when="1" src='App/images/Icons/alarm-low.png'>
   <img ng-switch-when="2" src='App/images/Icons/alarm-medium.png'>
   <img ng-switch-when="3" src='App/images/Icons/alarm-high.png'>
   <img ng-switch-default   src='default image source'>
</span>

U已为数据设置了两个条件。严重性==2已编辑。总的想法至少是这样的：）这只会在页面上只有一个这样的图像时起作用。如果包含两个或多个

数据

，则它们都将获得相同的图像（最后一个）。另外，如果

data.severity

发生更改，图像将不会更改，除非您再次在控制器中显式设置它。@Arg0n-我觉得我的答案非常适合这个问题。然而，我已经更新了我的答案，加入了一个可以处理多个图像的不同选项：）甚至不知道这个存在！我没有在我的代码中添加img src=“”，而是创建了一个具有图像url（背景：url）的类。在我的控制器中，我设置了一个条件，[如果严重性=3（那么class=“high”，“严重性=2，class=“medium”，等等）]，并使用{{}将该类名分配给一个变量在我的html中应用了该类。这对我很有用。建议是否可以优化任何内容。html为：if（severity==3）{aClassName=“high”}否则if（severity==2）{aClassName=“medium”}@HarpreetChawla我已经更新了我的答案，也使用了

ng class

。您的ng class方法工作得很好，但是当查看页面的DOM（使用inspect元素）时，它会暴露条件（即如果严重性=3，那么class=高），这是一个糟糕的做法。这就是为什么我更喜欢使用上面提到的方法。看看这个：

ng类

使用函数（在顶部）。没有暴露。顺便说一句，在任何情况下，用户都可以查看您的JavaScript，看看这是如何计算的。

ng-class="getSeverityClass(data)"

$scope.getSeverityClass = function(data){
    switch(data.severity){
        case 1:
            return 'low';
        break;
        case 2:
            return 'medium';
        break;
        default:
            return 'high';
        break;
    } 
}

<span ng-switch on="data.severity">
   <img ng-switch-when="1" src='App/images/Icons/alarm-low.png'>
   <img ng-switch-when="2" src='App/images/Icons/alarm-medium.png'>
   <img ng-switch-when="3" src='App/images/Icons/alarm-high.png'>
   <img ng-switch-default   src='default image source'>
</span>