UPDATE
Se eu por filtro
em vez de filtro.filtro
no serviço, retorna um erro, já que no URL é passado um array: filtro: {filtro: "ma"}
, e.g.
Erro
TypeError: a.values.forEach is not a function at https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:4:28299 at Array.forEach (native) at SVGGElement. (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:4:28268) at https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:5:11700 at H (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:1:4227) at Array.Fl.each (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:5:11664) at Array.b (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:4:28170) at Array.ka.call (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:3:13577) at SVGSVGElement. (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:5:2463) at https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:3:13502
Eu tenho um serviço AngularJS que recebe um parâmetro do controller e o envia para um arquivo PHP, que filtra o banco de dados e retorna dados no formato JSON.
O propósito é montar gráficos com Angular NVD3.
A primeira renderização é completada com sucesso, o gráfico é montado perfeitamente. No entanto, eu quero alterar os dados desse gráfico. Para isso, tenho alguns botões com os novos valores do parâmetro:
<div class="btn-group btn-group-sm">
<button type="button" ng-click="mudaValorDoFiltro('ma')" class="btn btn-default">Macrossegmento</button>
<button type="button" ng-click="mudaValorDoFiltro('es')" class="btn btn-default">Esfera</button>
<button type="button" ng-click="mudaValorDoFiltro('mo')" class="btn btn-default">Modalidade</button>
<button type="button" ng-click="mudaValorDoFiltro('st')" class="btn btn-default">Status</button>
</div>
Bem, como vocês podem ver, ng-click
chama uma função, que altera o valor da variável $scope.filtro
no controller:
.controller('InfograficosCtrl', ['$scope', 'InfograficosServico' , function($scope, InfograficosServico) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function (d) {
return d.label;
},
y: function (d) {
return d.value;
},
showValues: true,
valueFormat: function (d) {
return d3.format(',.0f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'Macrossegmento'
},
yAxis: {
axisLabel: 'Quantidade',
axisLabelDistance: -10
}
}
};
$scope.data = [];
$scope.filtro = "ma";
$scope.mudaValorDoFiltro = function(novoValorDoFiltro){
$scope.filtro = novoValorDoFiltro;
};
$scope.$watch('filtro', function(filtro){
$scope.filtro = filtro;
console.log(filtro);
});
InfograficosServico.barChart({filtro: $scope.filtro}).then(function(data) {
$scope.data = [{
key: "Quantidade de projetos por macrosssegmento",
values: data
}];
});
}]);
Percebam que eu estou "assistindo" ou monitorando o valor da variável no controller com $scope.$watch( . . .
.
Percebam também que o serviço foi injetado no controller.
.factory('InfograficosServico', ['$q', '$http', function ($q, $http) {
return {
barChart: function(filtro){
var defer = $q.defer();
$http.get(
'api/chart.php',
{
cache: 'true',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
params: {
filtro: filtro.filtro
}
}
)
.success(function(data) {
defer.resolve(data);
});
return defer.promise;
}
};
}]);
TL;DR
Eu preciso atualizar $scope.filtro
, mandando concomitantemente os novos valores para um serviço que usa o parâmetro para filtrar um banco de dados por meio do PHP.
filtro: filtro.filtro
parafiltro: filtro
nao resolve?