Why can not I update the variable value in the AngularJS service and pass it as a parameter to PHP?

Question

Why can not I update the variable value in the AngularJS service and pass it as a parameter to PHP?

Navigation

#1 by (0 votes)

0

UPDATE

If I by filtro instead of filtro.filtro in the service, it returns an error, since in the URL an array is passed: filtro: {filtro: "ma"} , ie.

Error

TypeError: a.values.forEach is not a function at link at Array.forEach (native) at SVGGElement. ( link ) at link at H ( link ) at Array.Fl.each ( link ) at Array.b ( link ) at Array.ka.call ( link ) at SVGSVGElement. ( link ) at link

I have an AngularJS service that receives a parameter from the controller and sends it to a PHP file, which filters the database and returns data in JSON format.

The purpose is to assemble graphics with Angular NVD3.

The first render is completed successfully, the graphic is mounted perfectly. However, I want to change the data for this chart. For this, I have some buttons with the new parameter values:

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

Well, as you can see, ng-click calls a function, which changes the value of the $scope.filtro variable in the 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
        }];
    });
}]);

Notice that I am "watching" or monitoring the value of the variable in the controller with $scope.$watch( . . . .

Notice also that the service has been injected into the 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

I need to update $scope.filtro , concomitantly sending the new values to a service that uses the parameter to filter a database through PHP.

php angularjs

asked by anonymous 01.02.2017 / 18:21

1 answer

Updates in code not being run during Debug, Eclipse How to customize the message / return code Http of an expired / invalid token in Web Api 2 + Owin?

score 0 · Accepted Answer

Well I solved my problem:

I was updating my variable the correct way, but I was not sending it to the service.

SOLUTION

I just had to change a detail in the controller: I put the function that received the service promise inside a function called _update() and called _update() within the scope of the function that monitors the filtro variable. So:

.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
            }];
        });
    }
}]);