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

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/k5hdxs2c/

5
  • Existe algum impedimento de usar ng-change no html ? Porque você poderia fazer uma soma para cada elemento. Por exemplo colocar no input data-ng-change executar uma função e essa função atualizasse o ng-model do total.. Commented 18/09/2015 às 12:39
  • Consegue me demostrar um exemplo baseado no código apresentado? Commented 18/09/2015 às 13:16
  • ng-change="somarValor(model.qtde_' + key + ')" criar essa função dentro da diretiva: $scope.somarValor(value){ $scope.valorTotal += value; } Eu pensei dessa maneira porque imaginei que sempre iria mostrar o campo total, então você poderia colocar um ng-model nele, aí você sempre iria atualizar ele, e serviria até para casos em que o valor fosse negativo. Commented 18/09/2015 às 14:22
  • Precisa realmente que seja uma diretiva? Achei a lógica um pouco complexa. Fiz uma solução aqui direto no controller, mas se quiser pode converter para diretiva. Dê uma olhada jsbin.com/hadubi
    – Daniel
    Commented 21/09/2015 às 12:29
  • @Daniel, o exemplo que você me deu serviu, veja como ficou, se quiser publicar sua resposta, irei marcar como escolhida: jsfiddle.net/ivanferrer/3ns0bxvq Commented 21/09/2015 às 19:46

1 Resposta 1

1
+50

Segue exemplo de solução abaixo direto no controller sem usar diretiva.

Html

<div ng-app="myApp">
    <div ng-controller="myController">
        <div ng-repeat="item in itens">
            <label>{{item.label}}</label>
            <input type="number" ng-model="item.value" ng-change="sum()">
        </div>
        <hr>
        <label>Total: </label>
        <input ng-value="total | currency:'R$ ' " type='text' disabled="disabled">
        <hr>
    </div>
</div>

CoffeeScript

myApp = angular.module 'myApp', []

myController = ($scope) ->
  $scope.itens = [
    {key: 'property_01', value: 0}
  ,
    {key: 'property_02', value: 0}
  ,
    {key: 'property_03', value: 0}
  ,
    {key: 'property_04', value: 0}
  ]

  $scope.sum = ->
    s = 0
    _.map $scope.itens, (i) -> s += parseFloat("#{if i.value then i.value else 0}".replace(',', '.'))
    $scope.total = s

myApp.controller('myController', ['$scope', myController])

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .