Trying to access scope variable in HTML with ng-style

Question

Im trying to have the color of {{f.percentage}} to change depending on what the percentage is. I am able to generate the Red Green Blue values but I do not know how to use ng-style to write "color: rgb(red,green,blue)". Thanks

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

I edited my original post to fix the issue, however its still not working — srsxyz
– srsxyz, Commented Oct 12, 2016 at 2:59

trungvose · Accepted Answer · 2016-10-12 03:33:00Z

2

I think you syntax is correct. Please check this working snippet.

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>

answered Oct 12, 2016 at 3:33

trungvose

20.1k9 gold badges51 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to access scope variable in HTML with ng-style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related