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

一种解决方案是将每个图标放入自己的 中，然后根据需要在跨度上使用 ng-show/hide ，但我想知道还有什么其他方法可以维护大型 ng-class 表达式，例如这个？

Answer 1

ngClass接受任何表达式，因此您可以将类定义对象放入 Controller 中并将其替换为函数调用:

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

在你的 Controller 中:

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

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