Изменение цвета ProgressBar на основе динамических данных для EasyPieCharts

Я использую easypiecharts в угловом формате. Я пытаюсь добавить атрибут (data-statusId) в разметку и использовать его в js для изменения цвета индикатора выполнения. Когда data-opt = 8, он должен быть серым или должен быть зеленым. Но мое состояние постоянно терпит неудачу, потому что значение greyBar возвращается как «неопределенное» все время.Изменение цвета ProgressBar на основе динамических данных для EasyPieCharts

скриншоты для справки. Мне нужно получить доступ к значению в наборе данных для «opt».

.directive('isLoaded', function() { 
    return { 
     restrict: 'A', //Attribute type 
     link: function (scope, elements, arguments) { 
      ProgressMeter($('#inprogress-card').find('.progress-icon'), false); 
     } 
    } 
}); 
function Meter($ele, isPopUp) { 
    setTimeout(function() { 
    if (isPopUp && $ele.find('canvas').length > 0) { 
     $ele.data('easyPieChart').update(0); 
     $ele.data('easyPieChart').update($ele.attr('data-percent')); 
    } 
    else {   
     $ele.easyPieChart({ 
      easing: 'easeOutBounce', 
      scaleColor: false, 
      lineWidth: 4, 
      trackColor: '#CCCCCC', 
      barColor: function() { 
      var greyBar = $ele.data('opt'); 
       if (typeof(greyBar) != 'undefined') 
        return '#44AD3A' 
       else 
        return '#989798' 
      }, 
      lineCap: 'round', 
      onStep: function (from, to, percent) { 
      } 
     }); 
    } 
    }, 100); 
}`

HTML:

<div class="progress-icon" data-opt="{{list.Status}}" data-percent=" {{ (20/30)* 100)}} ">

источник

2016-10-12 Priya Payyavula

Где 'ele' приходит из этой строке:' вар greyBar = $ (Эле) .data ('неавтоматического'); '? Я вижу '$ ele', но не' ele'. Разве вы не должны просто делать «var greyBar = $ ele.data ('opt');'? – Zach

исправил это. Я попробовал, но нет, он возвращался undefined, –

Итак, мой следующий вопрос: где 'opt', исходящий из следующей строки' typeof (opt) '? Вы получаете «greyBar», но я не вижу, чтобы вы его использовали. :) – Zach

Для некоторых, как я столкнулся проблемы с данными ассимилировать,. Я использовал isolated-scope вместо. Я добавил «opt = {{list.Status}}» в представление HTML, а затем в js, я добавил область: {opt: '@'}. И это сработало!

HTML,

<div ng-click="openModal($event,list,id)" opt="{{list.Status}}"> 
    <div class="progress-icon" data-percent=" {{ (20/30)* 100)}} "> 
</div>

ЯШ:

.directive('isLoaded', function() { 
     return { 
      restrict: 'A', 
      scope:{ 
       opt:'@' //*Added this* 
      } 
      link: function (scope, elements, arguments) { 
       if(scope.opt!=8) 
       ProgressMeter($('#inprogress-card').find('.progress-icon'), false,'#44AD3A'); 
       else 
       ProgressMeter($('#inprogress-card').find('.progress-icon'), false,'#989798'); 
      } 
     } 
    }); 
    function Meter($ele, isPopUp) { 
     setTimeout(function() { 
     if (isPopUp && $ele.find('canvas').length > 0) { 
      $ele.data('easyPieChart').update(0); 
      $ele.data('easyPieChart').update($ele.attr('data-percent')); 
     } 
     else {   
      $ele.easyPieChart({ 
       easing: 'easeOutBounce', 
       scaleColor: false, 
       lineWidth: 4, 
       trackColor: '#CCCCCC', 
       barColor: function() { 
       var greyBar = $ele.data('opt'); 
        if (typeof(greyBar) != 'undefined') 
         return '#44AD3A' 
        else 
         return '#989798' 
       }, 
       lineCap: 'round', 
       onStep: function (from, to, percent) { 
       } 
      }); 
     } 
     }, 100); 
    }`

источник

2016-10-26 19:29:05

Изменение цвета ProgressBar на основе динамических данных для EasyPieCharts

ответ

Смежные вопросы