Q1。假设我想要改变用户在按下主“删除”按钮之前标记为删除的每个“项目”的外观。(这种即时的视觉反馈应该消除了“你确定吗?”对话框的需要。)用户将选中复选框以指示应该删除哪些项。如果复选框未选中,则该项应恢复其正常外观。

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

Q2。假设我想允许每个用户个性化我的站点的呈现方式。例如,从固定的字体大小中选择,允许用户自定义前景色和背景颜色等。

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


当前回答

有一件事要注意-如果CSS样式有破折号-你必须删除它们。所以如果你想设置background-color,正确的方法是:

ng-style="{backgroundColor:myColor}" 

其他回答

你可以使用三元表达式。有两种方法:

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

还是……

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

我建议你用一个返回true或false的函数来检查控制器中的条件。

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

在你的控制器中检查情况

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

这个解决办法对我很管用

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>

从AngularJS v1.2 rc开始,ng-class甚至ng- atr -class在使用SVG元素时都失败了(它们在之前确实有效,即使是在class属性内部进行正常绑定)

具体来说,这些方法现在都不起作用:

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

作为一种变通办法,我不得不使用

ng-attr-otherAttr="{{current==this_element?'active':''}}"

然后使用样式

[otherAttr='active'] {
   ... styles ...
}

有一件事要注意-如果CSS样式有破折号-你必须删除它们。所以如果你想设置background-color,正确的方法是:

ng-style="{backgroundColor:myColor}"