有条件地应用 ng-class

Question

我正在根据某些条件显示图像（即，如果满足条件 1，则显示图像 1，如果满足条件 2，则显示图像 2，依此类推）。 我正在使用ng-if。我的代码如下所示：

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 form-col-pad customization-grid-data text-left"
     ng-if="data.severity==3">
        <img src="App/images/Icons/alarm-high.png">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 form-col-pad customization-grid-data text-left"
     ng-if="data.severity==2">
        <img src="App/images/Icons/alarm-medium.png">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 form-col-pad customization-grid-data text-left"
     ng-if="data.severity==1">
        <img src="App/images/Icons/alarm-low.png">
</div>

我只显示了 1 张图片，但我仍然需要编写 3 行代码。 这里如何使用ng-class，尽量减少写代码？

Answer 1

使用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="{{img.src}}"> 
</div>

内部控制器：

if($scope.data.severity == 2){
    $scope.img.src = 'App/images/Icons/alarm-medium.png';
} else if($scope.data.severity==1){
    $scope.img.src = 'App/images/Icons/alarm-low.png';
}

编辑

正如 cmets 中所指出的，如果在页面上使用多个，这将不起作用。所以这里有一个替代方案。

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

-

$scope.getSeverity = function(severity){
    if(severity == 2){
         return 'App/images/Icons/alarm-medium.png';
    } else if(severity == 1){
         return 'App/images/Icons/alarm-low.png';
    }
}

-

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

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

Answer 2

HTML

<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="{{'App/images/Icons/alarm-' + (data.severity == 1 ? 'low' : (data.severity == 2 ? 'medium' : 'high')) + '.png'}}">
</div>

或

HTML

<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="{{getSeveritySrc(data)}}">
</div>

控制器中的 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;
}

或

HTML 中的属性

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

示例 CSS

.low {
    background: green;
}

.medium {
    background: yellow;
}

.high {
    background: red;
}

或

HTML 中的属性

ng-class="getSeverityClass(data)"

控制器中的 JavaScript

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

还有一个JSFiddle 来展示这个与多个data 一起使用。

Answer 3

另一种选择是使用 ng-switch:

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