ng形式のHTMLでスコープ変数にアクセスしようとしています

Question

パーセントに応じて{{f.percentage}}の色を変更しようとしています。私はRed Green Blueの値を生成することができますが、 "color：rgb（red、green、blue）"を書くためにng-styleを使う方法はわかりません。ありがとう

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