Question

我想申请一个CSS课程说＆＃39; headerStyle＆＃39;还要更改＆＃39; headerStyle＆＃39;中定义的颜色属性。当用户从这样的颜色选择器中选择颜色时。问题是我只想使用ng-class。是否有可能只使用ng-class，我使用类和ng-style的混合做了同样的事情，但希望只使用ng-class。

HTML代码：

<input colorpicker type="text" ng-model="headerColor">

我试过这样但不行 - 标题分组：

<div ng-class="[headerStyle:true, {'background-color' : headerColor}]">

也喜欢这个 -

<div ng-class= "{headerStyle:true, 'background-color' : headerColor}">

这是我的css类headerStyle -

 .headerStyle {
       font-family: Helvetica, Arial, sans-serif !important;
       padding-top: 4px;
       font-size: 15px;
       color: #ffffff;
       text-align: center;
       text-shadow: #666666 1px 1px 1px;
       line-height: 16px;
       border: none;
  }

Thanx提前

Answer 1

<div class= "headerStyle" ng-class= "{'background-color' : headerColor}">

应该够了。您不需要将静态类放入ng-class中。 ng-class会将其他类添加到静态类中。

如果headerColor评估为true。结果将是：

<div class= "headerStyle background-color">

编辑：

根据你的评论，你需要的是ng风格。

<div class= "headerStyle" ng-style="divStyle">

在你的js：

$scope.headerColor = "#FFFFFF";
$scope.divStyle = {
     background-color : $scope.headerColor
}

精确度

ng-class：

ng-class用于根据某些值定义元素的类。其目的是添加动态类

ng-style：

ng-style用于为样式对象提供一些自定义css。其目的是添加动态样式

这是一个plunker，有两个工作例子

如何应用css类并使用ng-class在angularjs中动态更改css属性？

1 个答案:

编辑：

精确度