Skip to main content
Aviso removido Chamar atenção por Ivan Ferrer
Fim da Recompensa com Daniel's answer escolhido por Ivan Ferrer
Tweeted twitter.com/#!/StackOverflowPT/status/644759570032758784
Aviso adicionado Chamar atenção por Ivan Ferrer
Recompensa Oferecida vale 50 pontos de reputação por Ivan Ferrer
removeu 13 caracteres do conteúdo
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94

Preciso que funcione exatamente como nesse exemplo, em javascript puro: http://jsfiddle.net/ivanferrer/qpg5cy83/2/http://jsfiddle.net/k5hdxs2c/

Preciso que funcione exatamente como nesse exemplo, em javascript puro: http://jsfiddle.net/ivanferrer/qpg5cy83/2/

Preciso que funcione exatamente como nesse exemplo, em javascript puro: http://jsfiddle.net/k5hdxs2c/

adicionou 6526 caracteres ao conteúdo
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94
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 (angular.isDefined(scope.setNameLabels)) {
                     scope.labels = scope.setNameLabels.split(',');
                  } 
                 if (angular.isDefined(scope.setNumberFormat)) {
                     scope.formatNumber = scope.setNumberFormat;
                 } 
                 if (angular.isDefined(scope.setUnitLegend)) {
                     scope.unit = scope.setUnitLegend;
                 } 
         
       
                scope.elementView = '<div>';
                scope.labels.forEach(function(value, key) {
                scope.elementView += '<div class="' + scope.classElements + '">' +
                                    '<label>' + value + ' </label>' +
                                    '<input class="qtde" type="number" ng-model="model.qtde_' + key + '" ' +
                                    'placeholder="' + scope.placeholder + '" ' +
                                    'size="' + scope.size + '" ' +
                                    'maxlength="' + scope.maxlengh+'" ' +
                                    'max="' + scope.max + '" ' +
                                    'min="' + scope.min + '" ' +
                                    'step="' + scope.step + '">' +
                                    '</div>';
                 scope.listModels[key] = 'model.qtde_' + key;
                });
         
            var strnWatch =  "[" + scope.listModels.join(",") + "]";
        // console.log(strnWatch);
                 scope.$watch(strnWatch, function (data) {
                    var valor = 0;
                     var elementInputs = validElementScope.children(1).children(1).children(1).next();
                 angular.forEach(elementInputs, function(newVal, oldVal) {
                            console.log(newVal,'|',oldVal);
                            if (data == undefined || data == '' || isNaN(data)) {
                                valor += parseFloat(0);
                            } else {
                                valor += parseFloat(data);
                            } 
                         });
                      validElementTotal.text('Total: '+currencyFormatted(valor, scope.unit));
                   }, true);
  
         
              function currencyFormatted(value, str_cifrao) {
                    Number.prototype.formatMoney = function(c, d, t) {
                    var n = this, 
                        c = isNaN(c = Math.abs(c)) ? 2 : c, 
                        d = d == undefined ? "." : d, 
                        t = t == undefined ? "," : t, 
                        s = n < 0 ? "-" : "", 
                        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
                        j = (j = i.length) > 3 ? j % 3 : 0;
                       return s + (j ? i.substr(0, j) + t : "") +
                              i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) +
                              (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
                     };
                   scope.formatNumber.split("");
                 return str_cifrao + ' '+value.formatMoney(scope.formatNumber[0], scope.formatNumber[1], scope.formatNumber[2]);
               };
               validElementScope.html(scope.elementView);
        
  };

  return {
    restrict: 'EAC',
    scope: {
                setPlaceholder: "@",
                setMaxlengh: "@",
                setMax: "@",
                setMin: "@",
                setSize:"@",
                setStep:"@",
                setClassElements:"@",
                setNameLabels:"@",
                setNumberFormat:"@",
                setUnitLegend:"@",
            },  
    replace: true,
    template: "<div></div>",
    compile: function (tElem) {
    tElem.append(validElementScope);
    tElem.append(validElementTotal);    
        return link;
    }
  }
});
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 (angular.isDefined(scope.setNameLabels)) {
                     scope.labels = scope.setNameLabels.split(',');
                  } 
                 if (angular.isDefined(scope.setNumberFormat)) {
                     scope.formatNumber = scope.setNumberFormat;
                 } 
                 if (angular.isDefined(scope.setUnitLegend)) {
                     scope.unit = scope.setUnitLegend;
                 } 
         
       
                scope.elementView = '<div>';
                scope.labels.forEach(function(value, key) {
                scope.elementView += '<div class="' + scope.classElements + '">' +
                                    '<label>' + value + ' </label>' +
                                    '<input class="qtde" type="number" ng-model="model.qtde_' + key + '" ' +
                                    'placeholder="' + scope.placeholder + '" ' +
                                    'size="' + scope.size + '" ' +
                                    'maxlength="' + scope.maxlengh+'" ' +
                                    'max="' + scope.max + '" ' +
                                    'min="' + scope.min + '" ' +
                                    'step="' + scope.step + '">' +
                                    '</div>';
                 scope.listModels[key] = 'model.qtde_' + key;
                });
         
            var strnWatch =  "[" + scope.listModels.join(",") + "]";
        // console.log(strnWatch);
                 scope.$watch(strnWatch, function (data) {
                    var valor = 0;
                     var elementInputs = validElementScope.children(1).children(1).children(1).next();
                 angular.forEach(elementInputs, function(newVal, oldVal) {
                            console.log(newVal,'|',oldVal);
                            if (data == undefined || data == '' || isNaN(data)) {
                                valor += parseFloat(0);
                            } else {
                                valor += parseFloat(data);
                            } 
                         });
                      validElementTotal.text('Total: '+currencyFormatted(valor, scope.unit));
                   }, true);
  
         
              function currencyFormatted(value, str_cifrao) {
                    Number.prototype.formatMoney = function(c, d, t) {
                    var n = this, 
                        c = isNaN(c = Math.abs(c)) ? 2 : c, 
                        d = d == undefined ? "." : d, 
                        t = t == undefined ? "," : t, 
                        s = n < 0 ? "-" : "", 
                        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
                        j = (j = i.length) > 3 ? j % 3 : 0;
                       return s + (j ? i.substr(0, j) + t : "") +
                              i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) +
                              (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
                     };
                   scope.formatNumber.split("");
                 return str_cifrao + ' '+value.formatMoney(scope.formatNumber[0], scope.formatNumber[1], scope.formatNumber[2]);
               };
               validElementScope.html(scope.elementView);
        
  };

  return {
    restrict: 'EAC',
    scope: {
                setPlaceholder: "@",
                setMaxlengh: "@",
                setMax: "@",
                setMin: "@",
                setSize:"@",
                setStep:"@",
                setClassElements:"@",
                setNameLabels:"@",
                setNumberFormat:"@",
                setUnitLegend:"@",
            },  
    replace: true,
    template: "<div></div>",
    compile: function (tElem) {
    tElem.append(validElementScope);
    tElem.append(validElementTotal);    
        return link;
    }
  }
});
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94

Como fazer para que essa diretiva retornar no ng-bind a soma dos resultados?

Aqui a diretiva que estou tentando fazer: http://jsfiddle.net/ivanferrer/0u8t9a4n/2/

Ela usa o angular.element: https://docs.angularjs.org/api/ng/function/angular.element

Preciso que funcione exatamente como nesse exemplo, em javascript puro: http://jsfiddle.net/ivanferrer/qpg5cy83/2/