Question

我正在使用MEAN堆栈。当我在某个视图上时，我想知道我是否可以更改页面上的背景颜色。例如，如果我单击转到“联系人”视图，我希望该视图的背景颜色更改为蓝色。我在我的一个观点上试过这个

<section ng-controller="HomeController" style="background-color #97D2D8;">

</section>

但它只改变了其他项目的颜色，而不是页面。谢谢

Answer 1

您可以使用ngClass或ng-style

<强>纳克式：在你的控制器中声明一个可变的

myStyle={background-color:'red'}; //You can change the color according to the active view

然后在你看来

<section ng-controller="HomeController" ng-style="myStyle">
  </section>

Answer 2

它会有效，您错过了:代码，以下是修改后的代码，

<section ng-controller="HomeController" style="background-color : #97D2D8;">
</section>

Answer 3

似乎你在放入内联风格时错过了“：”。正确的方法应该是：

style="background-color: #97D2D8;"

此外，您还可以使用Angular提供的ngClass指令有条件地在DOM元素上应用css。

语法：

示例：

<style>
.sky {
    color:white;
    background-color:lightblue;
    padding:20px;
    font-family:"Courier New";
}
.tomato {
    background-color:coral;
    padding:40px;
    font-family:Verdana;
}
</style>
<body ng-app="">

<p>Choose a class:</p>

<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>

<div ng-class="home">
  <h1>Welcome Home!</h1>
  <p>I like it!</p>
</div>

并且根据编写CSS的最佳实践，不要编写内嵌样式而是创建外部样式，以便可以在所有页面中使用该类。

示例：

common.css
-----------
.back-color {
  background-color:#97D2D8;
}

index.html
----------
<section ng-controller="HomeController" style="back-color">

</section>

平均堆栈：在特定视图上更改主体背景颜色

3 个答案: