0

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.

2
  • 2
    se voce so trocar filtro: filtro.filtro para filtro: filtro nao resolve? Commented 1/02/2017 às 18:46
  • Eu atualizei a pergunta com a tentativa falha. Commented 1/02/2017 às 18:52

1 Resposta 1

0

Bem consegui resolver meu problema:

Eu estava atualizando a minha variável do modo correto, porém, não estava enviando-a para o serviço.

SOLUÇÃO

Eu só tive que alterar um detalhe no controller: coloquei a função que recebia a promessa do serviço dentro de uma função chamada _update() e chamei _update() dentro do escopo da função que monitora a variável filtro. Assim:

.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: $scope.filtro
            },
            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);
        _update();
    });
    function _update(){
        InfograficosServico.barChart({filtro: $scope.filtro}).then(function(data) {
            $scope.data = [{
                key: "Quantidade de projetos por macrosssegmento",
                values: data
            }];
        });
    }
}]);

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 .