javascript - 尝试使用 ng-style 访问 HTML 中的作用域变量

Question

我试图让 {{f.percentage}} 的颜色根据百分比的变化而变化。我能够生成红绿蓝值，但我不知道如何使用 ng-style 编写“颜色:rgb(红，绿，蓝)”。谢谢

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

Answer 1

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

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>