Question

我有想法在我的网页上更改主题。这是我正在使用的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我怎么能让它切换？我想有一个地址类型的链接，但我不知道如何在两个类之间切换？

Answer 1

您可以使用ng-class。以下是the docs。

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>

Answer 2

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

在控制器中：

$scope.applied = false;

然后在ng-class

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

因此，基于apply的值为true或false，它将在true时应用表达式applied中的属性值，而在false时应用notApplied。

编辑：

根据您的评论确定：

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

这应该做你想要的。

基本上只是将'background'类的值更改为单击的值。

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

，则应该相同

如何使用AngularJS实现样式切换器？

2 个答案: