使用 ng-class 和大表达式
using ng-class with large expressions
我正在使用 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这样的表情?
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 来显示一个合适的字体很棒的图标,但是几个月后,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这样的表情?
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 仅创建其引用。然后在您知道它可能已更改时手动更新它。