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

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

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

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


当前回答

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

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

还是……

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

其他回答

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

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

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

</style>

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

当我有一个类已经应用到整个表时,我在表元素中应用类时发现了问题(例如,应用到奇数行的颜色<myClass tbody tr:n -child(even) td>)。当您使用开发人员工具检查元素时,元素。样式没有指定样式。因此,我没有使用ng-class,而是尝试使用ng-style,在这种情况下,新的CSS属性确实出现在element.style中。这段代码对我来说很有用:

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

Myvar是我正在评估的东西,在每种情况下,我根据Myvar值对每个<td>应用一个样式,它覆盖了CSS类为整个表应用的当前样式。

更新

如果你想将一个类应用到表中,例如,当访问一个页面或在其他情况下,你可以使用这个结构:

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

基本上,激活ng-class所需要的是要应用的类和true或false语句。True应用该类,false不应用该类。所以这里我们有两次对页面路由的检查,它们之间有一个OR,所以如果我们在/route_a OR中,我们在route_b中,活动类将被应用。

它只需要在右边有一个逻辑函数,返回true或false。

所以在第一个例子中,ng-style有三个条件语句。如果它们都为假,则不应用任何样式,但按照我们的逻辑,至少有一个将被应用,因此,逻辑表达式将检查哪个变量比较为真,因为非空数组总是为真,将留下一个数组作为返回,只有一个为真,考虑到我们对整个响应使用OR,剩余的样式将被应用。

顺便说一下,我忘了给你isActive()函数:

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

新的更新

这是我觉得很有用的东西。当你需要应用一个依赖于变量值的类时,例如,一个依赖于div内容的图标,你可以使用下面的代码(在ng-repeat中非常有用):

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

字体图标

当你需要一个或两个属性的简单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);
}