JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div ng-app="isfModFinance">
    <isf-mod-finance set-placeholder="0" set-maxlengh="2" set-max="10" set-min="0" set-size="1" set-step="0" set-name-labels="Valor 1, Valor 2, Valor 3, Valor 4" set-class-elements="the-numbers" set-unit-legend="R$ " set-number-format="2,."></isf-mod-finance>
</div>

JavaScript

angular.module( 'isfModFinance', [])
.directive( 'isfModFinance', function() {
      var validElementScope = angular.element('<div>{{ model.input }}</div>');
      var validElementTotal = angular.element('<div>{{ model.total }}</div>');
      var link = function ( scope, element, attrs) {
         scope.$watch("model.input", function (value) {
           validElementScope.addClass("finance-inputs");
          });
         
          scope.$watch("model.total", function (value) {
           validElementTotal.addClass("total-values");
          });
        
      
           scope.listModels = [];
           scope.maxlengh = '2';
                  scope.max = '10';
                  scope.min = '0';     
                  scope.size = '1';   
                  scope.labels = ['Valor'];
                  scope.classElements = 'default';  
                  scope.formatNumber = '2,.';
                  scope.unit = 'R$ ';
                  scope.total_view = 'R$ 0,00';
          
         
      
                  if (angular.isDefined(scope.setPlaceholder)) {
                     scope.placeholder = scope.setPlaceholder;
                  } 
                  if (angular.isDefined(scope.setMaxlengh)) {
                     scope.maxlengh = scope.setMaxlengh;
                  } 
                  if (angular.isDefined(scope.setMax)) {
                     scope.max = scope.setMax;
                  } 
                 if (angular.isDefined(scope.setMin)) {
                     scope.min = scope.setMin;
                  } 
                 if (angular.isDefined(scope.setSize)) {
                     scope.size = scope.setSize;
                  } 
                 if (angular.isDefined(scope.setStep)) {
                     scope.step = scope.setStep;
                  } 
                 if (angular.isDefined(scope.setClassElements)) {
                     scope.classElements = scope.setClassElements;
                  } 
              
                 if...