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/
data-ng-change
executar uma função e essa função atualizasse o ng-model do total..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.