如何在AngularJS中有条件地应用CSS样式？

Itachi达蒙Green2020-03-23

Q1。假设我想在按下主“删除”按钮之前更改用户标记为要删除的每个“项目”的外观。（这种立即的视觉反馈应该消除了众所周知的“您确定吗？”对话框的需要。）用户将选中复选框以指示应删除哪些项目。如果未选中此复选框，则该项目应恢复为正常外观。

应用或删除CSS样式的最佳方法是什么？

Q2。假设我想允许每个用户个性化展示我的网站。例如，从一组固定的字体大小中进行选择，允许用户定义前景色和背景色等。

应用用户选择/输入的CSS样式的最佳方法是什么？

猿凯2020/03/23 12:17:18

要注意的一件事是-如果CSS样式中有破折号-您必须将其删除。因此，如果要设置background-color，正确的方法是：

ng-style="{backgroundColor:myColor}"

猿樱2020/03/23 12:17:18

（将来）有条件应用样式的另一种方法是有条件地创建范围样式

<style scoped type="text/css" ng-if="...">

</style>

但是如今，只有FireFox支持范围样式。

蛋蛋猿2020/03/23 12:17:18

好吧，我建议您使用返回true或false的函数检查控制器中的条件。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

并在控制器中检查情况

$scope.getTodayForHighLight = function(today, date){
    return (today == date);
}

Newest Answer