Changer la couleur de la barre de progression en fonction des données dynamiques pour EasyPieCharts

Question

J'utilise easypiecharts en angulaire. J'essaie d'ajouter un attribut (data-statusId) à la balise et de l'utiliser en js pour changer la couleur de la barre de progression. Lorsque data-opt= 8, elle devrait devenir grise ou verte, mais ma condition échoue tout le temps parce que la valeur de greyBar est retournée comme "undefined" tout le temps.

Ci-joint les captures d'écran pour référence. J'ai besoin d'accéder à la valeur sous le jeu de données pour "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

Pour une raison quelconque, j'ai rencontré des problèmes avec le data-opt, . J'ai utilisé périmètre isolé à la place. J'ai ajouté "opt={{list.Status}}" à la vue HTML et ensuite dans js, j'ai ajouté scope : {opt : '@'}. Et ça a marché !

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