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

Question

我试图根据百分比来改变{{f.percentage}}的颜色。我能够生成红绿蓝值，但我不知道如何使用ng-style来编写＆＃34;颜色：rgb（红色，绿色，蓝色）＆＃34;。感谢

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

Answer 1

我认为你的语法是正确的。请检查此工作代码段。

＆＃13;

＆＃13;

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'])
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;