有条件地应用ng类

Apply ng-class conditionally

本文关键字：ng 应用 有条件      更新时间：2023-09-26

我根据某些条件显示图像（即，如果条件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>

我只显示了一个图像，但我仍然需要写3行代码。如何在这里使用ng-class，以最大限度地减少编写的代码？

另一种选择是使用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>

使用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';
}

编辑

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

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

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的协同工作。

相关文章：