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

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

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

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


当前回答

这个解决办法对我很管用

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

其他回答

当你需要一个或两个属性的简单css样式时,另一个选择:

观点:

<tr ng-repeat="element in collection">
    [...amazing code...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...more amazing code...]
</tr>

控制器:

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};

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

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

在你的控制器中检查情况

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

还有一种(将来)有条件地应用样式的方法是有条件地创建有作用域的样式

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

</style>

但是现在只有FireFox支持范围样式。

这个解决办法对我很管用

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