css - 如何在选择时更改主题背景颜色和文本颜色

Question

有没有办法在angular js中使用CSS通过用户选择来改变网页的样式。

我在谷歌上试过了，但没有任何效果。

我有一个具有样式的 CSS 文件。我需要通过更改背景颜色、文本颜色、字体样式来重写所有 div 中的样式。

    $scope.model.webPageSkin = 'Default';  

    // create the list of themes  
    $scope.bootstraps = [  
        { name: 'Plain', url: 'Plain' },  
        { name: 'Blue', url: 'Blue' },  
        { name: 'Green', url: 'Green' } , 
        { name: 'Default', url: 'default' } , 
    ]; 

**Plain.css**

ChangeColor  
{  
    font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;  
    font-size: 15px;  
    line-height: 1.42857143;  
    color: #333333;  
    background-color: #ddd;  
}  


**default.css**

.ChangeColor  
{  
    font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;  
    font-size: 15px;  
    line-height: 1.42857143;  
    color: #333333;  
    background-color: #3c8dbc;  
}  

<div class="wrapper>
     <header class="main-header">
          <nav class="navbar navbar-static-top" ng-class="{ChangeColor: 
           model.webPageSkin !important;}">
          </nav>
     </header>

<div class="row">
<select  ng-model="model.webPageSkin" ng-options="bootstrap.url as bootstrap.name for bootstrap in bootstraps">  
                </select>
</div>
</div>

任何人都可以建议我如何做到这一点。

Answer 1

ng-class 采用 angularjs 表达式来评估，而不是您当前指定的 CSS 样式。

ngClass API docs

因此您的标记需要更改为基本上说，我希望每当 Angular 评估 model.webPageSkin 时“ChangeColor”的 css 类是真实的。

ng-class="{'ChangeColor': model.webPageSkin}">