EasyPieCharts의 동적 데이터를 기반으로 ProgressBar 색 변경

Question

각도로 easypiecharts를 사용하고 있습니다. 마크 업에 속성 (data-statusId)을 추가하고 js에서이를 사용하여 진행 막대의 색상을 변경하려고합니다. data-opt = 8 일 때 회색으로 바뀌거나 그렇지 않으면 green.But해야합니다. 왜냐하면 greyBar 값은 항상 "정의되지 않은"값으로 반환되기 때문에 항상 내 상태가 실패합니다.

참조 용 스크린 샷 첨부. "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)}} "> 

Answer 1

. 나는 대신 격리 범위을 사용했습니다. "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> 

JS :

.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); 
    }`