Question

确定。所以这是一个菜鸟问题。我刚开始玩angularjs，我想知道是否有某种类似于ng-click的切换功能，或者我必须自己构建。我想要的是当用户检查黑暗主题选项时，更改页面正文的背景和字体颜色我设法改变了点击功能的颜色，但我需要它在没有检查时回到初始状态。欢迎任何建议：）

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-style="myStyle">
<label><input type="checkbox" ng-click="myStyle={background:'black', color:'white'}">Dark theme</label>
<script>
app = angular.module('myApp', []);
</script>
</body>
</html>

＆＃13;

Answer 1

您可以使用ng-class将新类应用于元素。文档在这里：https://docs.angularjs.org/api/ng/directive/ngClass

我在自己的应用程序中做了类似的事情，从选项页面选择主题会将新类应用到每个页面的主要内容部分。我现在没有可用的代码，但如果您愿意，我可以在以后发布。

Answer 2

您需要将样式添加到组件.scss文件或app.scss

.darkTheme {background:'black', color:'white'}

然后你可以使用像Steve提到的ng-class指令来应用你的风格

<body ng-app="myApp" ng-class="{'darkTheme' : darkToggle}">

并在输入中添加模型

<input type="checkbox" ng-model="darkToggle">

Answer 3

工作解决方案

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.dark-theme {
    color: white;
    background: black;
}
</style>
<body ng-app="myApp" ng-class="{'dark-theme': dark}">
<label><input type="checkbox" ng-model="dark">Dark theme</label>
<script>
app = angular.module('myApp', []);
</script>
</body>
</html>

＆＃13;

使用angularjs更改背景和字体颜色

3 个答案: