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

修改

正如评论中指出的那样，如果在页面上使用多个，则无法使用。所以这是另一种选择。

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

-

作为关于你的bootstrap代码的偏离主题的注释，作为一个建议，你实际上可能会丢失很多你的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

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

Answer 3

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>

Controller中的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)"

Controller中的JavaScript

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

并JSFiddle显示此处理多个data。

有条件地申请ng-class

3 个答案: