Блог

Главная - Вопросы по программированию - Попытка получить доступ к переменной области видимости в HTML с помощью ng-style

Попытка получить доступ к переменной области видимости в HTML с помощью ng-style

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

Я пытаюсь изменить цвет {{f.percentage}} в зависимости от значения процента. Я могу генерировать значения Red Green Blue, но я не знаю, как использовать ng-style для записи «цвет: rgb (красный, зеленый, синий)». Спасибо

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

Комментарии:

1. Я отредактировал свой исходный пост, чтобы устранить проблему, однако он все еще не работает

Ответ №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>