How to set angular json model into css

Question

I have this code being generated somewhere else in the application

"PHcolour":"rgb(4, 31, 156)","Ctextcolour":"rgb(59, 214, 252)"

I'm getting the data fine (from the model), using the squiggly brackets {{CtextColour}}

I'm wanting to have a button on my page that could change the colour scheme of the site. I have this working for something else using ng-click

Now the issue i'm having is the css won't accept the {{}} So the method i was trying to do it was like this

<style media="screen">
.custom { background-color: #fff; }
.custom h1 { color: {{Ctextcolour}}; }
.custom h2 { color: {{Ctextcolour}}; }
.custom h3 { color: {{Ctextcolour}}; }
.custom h4 { color: {{Ctextcolour}}; }
.custom h5 { color: {{Ctextcolour}}; }
.custom h6 { color: {{Ctextcolour}}; }
.custom p { color: {{Ctextcolour}}; }
.custom th { background-color: #c3cced; color: {{Ctextcolour}};}
.custom.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #c3cced ) !important; color: {{Ctextcolour}} !important;}
</style>

Which did not work (and also turned the rest of my html code pink in my IDE (Atom)

I tried switching it over to this which removed the pink, But still didn't work!

<ng-style media="screen">
.custom { background-color: #fff; }
.custom h1 { color: {{Ctextcolour}}; }
.custom h2 { color: {{Ctextcolour}}; }
.custom h3 { color: {{Ctextcolour}}; }
.custom h4 { color: {{Ctextcolour}}; }
.custom h5 { color: {{Ctextcolour}}; }
.custom h6 { color: {{Ctextcolour}}; }
.custom p { color: {{Ctextcolour}}; }
.custom th { background-color: #c3cced; color: {{Ctextcolour}};}
.custom.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #c3cced ) !important; color: {{Ctextcolour}} !important;}
</ng-style>

The html for the button is this:

<button type="button" class="btn btn-info" ng-click="colorScheme = 'custom'" ng-model="eventData.theme">Custom Theme
    </button>

The inspect element shows nothing has been added to the button, There is also no javascript errors at all.

Thanks

Edit http://plnkr.co/edit/8V35DqflzX9pkFcmpesb?p=preview

swenedo · Accepted Answer · 2015-09-01T10:06:44.640

0

Look at the documentation page for ngStyle. This is how you can use it:

HTML

<p ng-style="myStyle">Text</p>
<button ng-click="set()">set</button>
<button ng-click="clear()">clear</button>

Controller

$scope.data = {"PHcolour":"rgb(4, 31, 156)","Ctextcolour":"rgb(59, 214, 252)"};

$scope.set = function(){
    $scope.myStyle = { color: $scope.data.Ctextcolour } 
};

$scope.clear = function(){
    $scope.myStyle = undefined; 
};

See plunker.

edited Sep 01 '15 at 10:06

answered Sep 01 '15 at 08:29

swenedo

3,074
8
30
49

Yeah i was just looking at that but it just puts in the `{{Ctextcolour}}` in the mystyle area – ddsbro Sep 01 '15 at 08:46
Can you update your question with a link to a jsFiddle or plnker? – swenedo Sep 01 '15 at 09:18
I updated my answer with new code and link to a plunker – swenedo Sep 01 '15 at 10:08
Well i'm having an issue with ng click now, not sure thats your fault, I can't fully test it so i'm awarding it based on the plunker – ddsbro Sep 01 '15 at 10:29

score 0 · Answer 2 · edited May 23 '17 at 10:26

ng-style works as html style, you can add properties to an element. But you cant generate new css class.

You can check ngStyle official doc

I recommend you this post and i let you and example on this snippet

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css">
  
  <style>
    .original {
      background-color: red;
    }
  </style>

  <script>

  var myApp = angular.module('myApp', []);


  myApp.controller("myAppCtrl", ["$scope", "$document", function($scope, $document) {

      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];

      $scope.style = function(value) {
          return { "background-color": value };
      }

  }]);


  </script>

</head>
<body>

<div ng-controller="myAppCtrl">
 <h4 class="original" > hi! i have the original class</h5>
    
  <h4 class="original" ng-style="style(colors[0])"> hi! i am the first color in array</h5>
  <h4 class="original" ng-style="style(colors[1])"> hi! i am the second color in array</h5>


</div>

</body>
</html>

I edited my answer, you cant do it with ng-style like that, i gave you a solution. — Ivan Coronado, Sep 01 '15 at 09:21
I'm trying your method now, Not totally sure how i can get it to work with the method i'm doing it now as i have another button that works fine — ddsbro, Sep 01 '15 at 09:31

How to set angular json model into css

2 Answers2

Linked