如何将角度json模型设置为css答案

【问题标题】：How to set angular json model into css如何将角度json模型设置为css
【发布时间】：2015-11-26 09:19:08
【问题描述】：

我在应用程序的其他地方生成了这段代码

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

我得到了很好的数据（来自模型），使用波浪括号{{CtextColour}}

我想在我的页面上有一个可以更改网站配色方案的按钮。我使用ng-click

现在我遇到的问题是 css 不接受 {{}} 所以我尝试这样做的方法是这样的

<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>

这不起作用（并且还在我的 IDE (Atom) 中将我的 html 代码的其余部分变成了粉红色

我尝试将它切换到去除粉红色的这个，但仍然没有工作！

<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>

按钮的html是这样的：

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

inspect 元素显示按钮没有添加任何内容，也没有任何 javascript 错误。

谢谢

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

【问题讨论】：

标签： css angularjs

【解决方案1】：

查看ngStyle 的文档页面。你可以这样使用它：

HTML

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

控制器

$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.

【讨论】：

是的，我只是在看那个，但它只是在 mystyle 区域中添加了 {{Ctextcolour}}
你能用 jsFiddle 或 plnker 的链接更新你的问题吗？
我用新代码更新了我的答案并链接到一个 plunker
嗯，我现在遇到 ng click 的问题，不确定那是你的错，我无法完全测试它，所以我根据 plunker 授予它

【解决方案2】：

ng-style 用作 html 样式，您可以为元素添加属性。但是你不能生成新的 css 类。

您可以查看ngStyle official doc

我推荐你这个post，我让你和这个sn-p上的例子

<!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>

【讨论】：

与我在其他答案中的评论相同！
我编辑了我的答案，你不能用 ng-style 那样做，我给了你一个解决方案。
我现在正在尝试你的方法，不完全确定如何让它与我现在正在做的方法一起工作，因为我有另一个可以正常工作的按钮