Question

如何使用带角度js的css类更改元素的颜色。我在线阅读了一些内容，但不知怎的，我错过了一些东西，因为它对我不起作用。

我的小提琴：

代码：

<p class="change-background-color">No difference!</p>
 <form>
 <div class="form-group">
      <label>Header color</label>
      <input class="form-control" type="text"  ng-model="Headercolor" placeholder="#f00">
    </div>
    </form>

CSS

.change-background-color { background-color: {{Headercolor}}; }

Answer 1

请检查更新的fddle：http://jsfiddle.net/ynko3ct3/2/

您应该使用ng-style指令更改HTML中的样式属性，不是CSS ，如下所示：

<p class="change-background-color" ng-style="{'background-color':Headercolor}">
  No difference!
</p>

Answer 2

您也可以查看此链接：PLUNKER DEMO

需要在ng-style="yourVariableName"代码中使用<p></p>，并在更改输入字段时调用函数，以设置<p></p>代码的输入字段颜色。

在html中：

<p ng-style="backColor">this is a simple background color seter</p>
<input ng-model="headerColor" ng-change="setColor()">

并在您的控制器中：

$scope.headerColor = '#cd0a0a';
  $scope.backColor = {'background-color':$scope.headerColor};
  $scope.setColor = function() {
    $scope.backColor = {'background-color':$scope.headerColor};
  };

如何使用angular.js更改元素的颜色

2 个答案: