JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<div ng-app="poc">
    
    <div ng-controller="Main">
        <h1>{{header}}</h1>
        
        <div>
            <input type="button" ng-click="decrease('s1')" value="-" /> 
            <input type="button" ng-click="increase('s1')" value="+" /> 
            {{loading.states.s1}}
            <span ng-show="loading.states.s1">Loading</span>
        </div>
        <div>
            <input type="button" ng-click="decrease('s2')" value="-" /> 
            <input type="button" ng-click="increase('s2')" value="+"/> 
            {{loading.states.s2}}
            <span ng-show="loading.states.s2">Loading</span>
        </div>
    </div>
    
</div>

JavaScript

angular.module('poc', [])

.controller('Main', function($scope, Loading){
    $scope.loading = Loading;
    $scope.header = 'PoC';
    
    $scope.increase = function(groupName){
        Loading.start(groupName);
    };
    $scope.decrease = function(groupName){
        Loading.end(groupName);
    };
})

.factory('Loading', function(){
    var states = {};
    
    var start = function(groupName){
        var stateCount = states[groupName] || 0;
        states[groupName] = (++stateCount);
    };
    
    var end = function(groupName){
        var stateCount = states[groupName] || 0;
        if(stateCount > 0){
            states[groupName] = (--stateCount);
        }
    };
    
    return {
        start: start,
        end: end,
        states: states
    }
});