JSFiddle - React, Tailwind, and code Playground

by Michael Conroy

HTML

<div ng-app="app" ng-controller="testCtrl">
    <test-direct ng-repeat="obj in group track by $index" name="{{obj.name}}" progress="obj.progress"></test-direct>
</div>

CSS

.card {
    width: 25%;
    border: 1px solid #999;
    padding: 5px;
    margin: 5px;
    float: left;
    text-align: center;
}
small {
    color: #ccc;
}

JavaScript

var app = angular.module('app',[]);

app.controller('testCtrl',function($scope,$interval){
    $scope.group = [
        {
            name: 'Test One',
            progress: 0,
        },
        {
            name: 'Test Two',
            progress: 0,
        },
        {
            name: 'Test Three',
            progress: 0,
        }
    ];
    
    $interval(function(){
        // randomly simulate progress
        var which = Math.floor(Math.random() * 3);
        // update progress
        var howmuch = Math.floor((Math.random() * 5) + 1);
        if($scope.group[which].progress < 100){
            $scope.group[which].progress += howmuch;
            if($scope.group[which].progress >= 100)
                $scope.group[which].progress = 100;
        }
    },500);
});

app.directive('testDirect',function(){
    return{
        restrict: 'E',
        replace: false,
        scope: {
            name: '@',
            progress: '='
        },
        template: '<div class="card"><h3>{{name}}</h3>{{progress}}%<br><small>Changed from {{old}} to {{newVal}}</small></div>',
        link: function(scope,el,attrs){
            scope.$watch('progress',function(val,old){
                scope.old = old;
                scope.newVal = val;
            });
        }
    };
});