0

我有一个想法来改变我网页上的主题。这是我正在使用的 CSS：

html.darkBlue {
    .block-content.light-tint-bg {
        background: #fefefe;
        border: 1px solid #777777;
        color: #7b7b7b;
    }
}
html.black {
    .block-content.light-tint-bg {
        background: #333333;
        border: 1px solid #111111;
    }
}

这个想法是我向 HTML 添加一个类，并且根据使用的类，它将使用一个或另一个主题。

但是对于 Angular，我怎么能让它切换呢？我想有一个地址类型的链接，但我不知道如何在两个类之间切换？

4

2 回答 2

1

您可以使用ng-class. 这是文档。

ng-class允许您使用表达式解析类。

此处的示例显示了用法：

<p ng-class="{applied: 1 == 1, notApplied: 1 == 0}">Example</p>

表达式1 == 1将解析为 true，并且“应用”类将添加到class属性中。

为了处理单击和切换类，您将创建一个作用域变量。例如，这将切换clicked将添加/删除类的字段：

<div ng-click="clicked = !clicked" ng-class="{black: clicked, darkBlue: !clicked}"></div>
于 2013-10-05T08:09:03.783 回答
1

我使用与@Davin Tryon 类似的方法，除了像这样：

在控制器中：

$scope.applied = false;

然后在ng-class

ng-class="{true: 'applied', false: 'notApplied'}[applied]"

所以根据applyed的值是true还是false，它会在appliedtrue时应用表达式中的属性值，notApplied当false时。

编辑：

好的，根据您的评论：

http://jsfiddle.net/muLPT/

<div ng-app ng-class="background">
    Hello World

    <input type="button" ng-click="background = 'black'" value="black">
    <input type="button" ng-click="background = 'red'" value="red">
    <input type="button" ng-click="background = 'blue'" value="blue">
</div>


.black {
    background: black;
}
.red {
    background: red;
}
.blue {
    background: blue;
}

这应该做你想要的。

基本上只是将“背景”类的值更改为点击过的值。

该示例是在 a 上完成的，div因为我无法html从 jdfiddle 演示它。如果应用于html

于 2013-10-05T08:16:21.667 回答