Как изменить цвет элементов с помощью angular.js

Question

Как изменить цвет элементов, используя классы css с угловыми js. Я читал некоторые вещи в Интернете, но почему-то я чего-то не хватает, потому что это не работает для меня.

Моя скрипка расслоение плотной:

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

Код:

<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

вы можете также проверить эту ссылку: 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}; 
    }; 

Answer 2

Пожалуйста, проверьте обновленный fddle: http://jsfiddle.net/ynko3ct3/2/

Вы должны использовать ng-style директиву, чтобы изменить атрибут стиля в HTML, не в CSS так:

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