对AngularJS中的条件文本使用DRY函数，而不是重复的ng类

Use a DRY function instead of a repeating ng-class for conditional text in AngularJS

本文关键字：ng DRY 条件 AngularJS 文本 函数      更新时间：2023-09-26

我使用了5次以上（我计划使用更多）相同的html/angular标签：

<div
    ng-class="{
      'critical': 'fa fa-warning fa-fw fa-2x text-red',
      'high': 'fa fa-warning fa-2x fa-fw text-orange' ,
      'medium': 'fa fa-warning fa-2x fa-fw text-yellow',
      'low': 'fa fa-warning fa-2x fa-fw text-aqua'
      }[ticket.service_impact]">
</div>

我如何在代码中一次又一次地在筛选器或指令中使用这段丑陋的代码？我在Rails上工作，所以遵循DRY实践非常重要。

根据AngularJS Api Docs，您在ngClass指令的表达式部分有一些自由。

(https://docs.angularjs.org/api/ng/directive/ngClass)

该指令有三种不同的操作方式，具体取决于表达式计算为三种类型：

如果表达式的计算结果为字符串，则该字符串应为1或更多以空格分隔的类名。

如果表达式的计算结果为对象，则对于每个键值对对于具有truthy值的对象，使用相应的键作为类名。

如果表达式的计算结果为数组，则该数组的每个元素应该是类型1中的字符串或类型2中的对象。这意味着您可以在数组中将字符串和对象混合在一起让您可以更好地控制CSS类的显示。请参阅下面的代码例如。

因此，如果您愿意，可以提取冗长的表达式并将其放入变量或函数中。

相关文章：