使用 ng-class 和大表达式

Question

我正在使用 ng-class 来显示一个合适的字体很棒的图标，但是几个月后，ng-class 使用的表达式变得难以维护并且尝试起来很烦人并阅读：

<span ng-class="{'fa fa-close iconBlack':stain.StainStatus == 'Canceled', 'fa fa-exclamation-circle iconRed': stain.StainStatus == 'Missing', 'fa fa-clock-o iconOrange':stain.StainStatus == 'Ordered' || stain.StainStatus == 'Printed' || stain.StainStatus == 'In Process', 'fa fa-check iconGreen': stain.StainStatus == 'Verified' || stain.StainStatus == 'Completed', 'fa fa-pause iconPurple stainPauseIconFontSize': stain.StainStatus == 'On Hold', 'fa fa-ban iconRed':stain.Count > 1 && modifyModeActive}"></span>

一个解决方案是将每个图标放入它们自己的中，然后根据需要在 span 上使用 ng-show/hide，但我想知道还有什么其他方法可以维持一个大的 ng-class这样的表情?

Answer 1

ngClass 接受任何表达式，因此您可以将 class 定义对象放入控制器并用函数调用替换它：

<span ng-class="getMyClasses()"></span>

在你的控制器中：

$scope.getMyClasses = function() {
    return {
        'fa fa-close iconBlack':stain.StainStatus == 'Canceled',
        'fa fa-exclamation-circle iconRed': stain.StainStatus == 'Missing',
        'fa fa-clock-o iconOrange':stain.StainStatus == 'Ordered' || stain.StainStatus == 'Printed' || stain.StainStatus == 'In Process',
        'fa fa-check iconGreen': stain.StainStatus == 'Verified' || stain.StainStatus == 'Completed',
        'fa fa-pause iconPurple stainPauseIconFontSize': stain.StainStatus == 'On Hold',
        'fa fa-ban iconRed':stain.Count > 1 && modifyModeActive
    }
}

这可能会有一些性能问题，因为它必须在每次摘要调用时创建对象，因此您可以只创建一次对象并且 return 仅创建其引用。然后在您知道它可能已更改时手动更新它。

使用 ng-class 和大表达式

using ng-class with large expressions

javascript

angularjs

font-awesome