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

Question

How can I change color of elements using css classes with angular js. I read some stuff online but somehow I am missing something as it does not work for me.

My js fiddle:

http://jsfiddle.net/ynko3ct3/1/

Code:

<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

Please check the updated fddle: http://jsfiddle.net/ynko3ct3/2/

You should use ng-style directive to change style attribute in HTML, not in CSS like this:

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

Answer 2

you can check also this link : PLUNKER DEMO

need to use ng-style="yourVariableName" in your <p></p> tag and call a function on change of input field to set input field color for <p></p> tag.

In html:

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

and in your controller:

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