尝试使用 ng-style 访问 HTML 中的范围变量

【问题标题】：Trying to access scope variable in HTML with ng-style尝试使用 ng-style 访问 HTML 中的范围变量
【发布时间】：2016-10-12 02:52:47
【问题描述】：

我试图让 {{f.percentage}} 的颜色根据百分比来改变。我能够生成 Red Green Blue 值，但我不知道如何使用 ng-style 来编写“color: rgb(red,green,blue)”。谢谢

  <div class="winPer" style="float:right;">
       <span ng-style="{'color': 
         'rgb(' + f.red + ',' + f.green + ',' + f.blue + ')'}">{{f.winRate}}%</span> 
   </div>

【问题讨论】：

我编辑了我的原始帖子以解决问题，但它仍然无法正常工作

标签： javascript html angularjs

【解决方案1】：

我认为你的语法是正确的。请检查这个工作的 sn-p。

angular.module('app', [])
  .controller('appCtrl', ['$scope',
    function($scope) {
      $scope.f = {
        red: '210',
        green: '20',
        blue: '20'
      }
      $scope.combineColor = function(f) {
        return 'rgb(' + f.red + ',' + f.green + ',' + f.blue + ')';
      }
    }
  ])

angular.element(document).ready(function() {
  angular.bootstrap(document, ['app'])
})

.container {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-controller="appCtrl">

  <h2 ng-style="{'color': 'rgb(' + f.red + ',' + f.green + ',' + f.blue + ')'}">{{combineColor(f)}} </h2>

  <h2 ng-style="{'color': combineColor(f)}">{{combineColor(f)}} </h2>

</div>

【讨论】：