Problem retrieving form data in angularjs

0

I have a mobile app I have a form that does a filter by districts and counties what happens and is not redeeming the data selected at home select the triggered button does nothing.

Controller

.controller('FiltraEstabelecimentos', function($scope, $http, $stateParams) {
    $scope.BtnFiltraCat= function (campo){
        $http.post("https://www.sabeonde.pt/api/api_filtra_estabelecimentos.php?distrito=" + campo.distrito + "&concelho=" + campo.concelho + "&categoria=" +$stateParams.catSlug).success(function (data) {
            $scope.filtra_estabelecimentos = data;
        });
    };
})

View

<div ng-controller="FiltraEstabelecimentos">
        <form>
            <div class="row">
                <div class="col">
                    <label ng-controller="ListaDistritos" style="border-radius: 10px; margin: 0px 0px 10px 0px;" class="item item-input item-select">
                        <div class="input-label">
                            Distrito
                        </div>
                        <select ng-model="campo.distrito">
                            <option ng-repeat="lista_distritos in distritos" value="{{lista_distritos.id}}">{{lista_distritos.titulo}}</option>
                        </select>
                    </label>
                    <label ng-controller="ListaConcelhos" style="border-radius: 10px;" class="item item-input item-select">
                        <div class="input-label">
                            Concelho
                        </div>
                        <select style="border-radius: 10px;" ng-model="campo.concelho">
                            <option ng-repeat="lista_concelhos in concelhos" value="{{lista_concelhos.titulo}}">{{lista_concelhos.titulo}}</option>
                        </select>
                    </label>
                </div>
            </div>
            <div style="margin:0px 10px 0px 10px;">
                <button type="submit" ng-click="BtnFiltraCat(campo);" style="background-color: #CA5B60; border:#CA5B60; border-radius: 10px;" class="button button-block button-positive">
                    <i class="ion-search"></i> Pesquisar
                </button>
            </div>
        </form>  
    </div> 
    
asked by anonymous 14.10.2015 / 18:44

2 answers

0

First create a service: OBS: So I noticed you sent the url passing parameters via get and not post. So I defined it as a get method.

//inicio do serviço
.factory('FiltroEstabelecimentos', ['$http',
            function ($http) {
              //construtor do serviço
              function FiltroEstabelecimentos() {
                var self = this;
                   //método que recebe os parâmetros para retornar a requisição em um promise
                    self.getEstabelecimentos = function(params) {

                          var promise;
                          var distrito = params.distrito;
                          var concelho = params.concelho;
                          var categoria = params.categoria;
                          var url = 'https://www.sabeonde.pt/api/api_filtra_estabelecimentos.php?distrito=' + distrito + '&concelho=' + concelho + '&categoria=' + categoria;
                          //método get
                          promise = $http.get(url);
                          //retorno da coleção
                          return promise;

              };
           } //instancia o serviço, permitindo chamar seus métodos no controller
              return new FiltroEstabelecimentos();
}])
.factory('AllEstabelecimentos', ['$http',
            function ($http) {
              //construtor do serviço
              function AllEstabelecimentos() {
                var self = this;
                   //método que recebe os parâmetros para retornar a requisição em um promise
                    self.getAllEstabelecimentos = function() {
                          var promise;
                          var url = 'https://www.sabeonde.pt/api/api_filtra_estabelecimentos.php?all';
                          //método get
                          promise = $http.get(url);
                          //retorno da coleção completa
                          return promise;
              };
           } //instancia o serviço, permitindo chamar seus métodos no controller
              return new AllEstabelecimentos();
}]);

Then in your controller, use the service created:

       //inicia o controller
        .controller('FiltraEstabelecimentos', ['$scope','$http','$stateParams', 'FiltraEstabelecimentos', 
              function($scope, $http, $stateParams, FiltraEstabelecimentos, AllEstabelecimentos) {
                  /* injeta o serviço que traz todos
                     os estabelecimentos 
                     (OBS: método que trás todos os dados,
                      sem passar parâmetros) */
                  $scope.campo = AllEstabelecimentos.getAllEstabelecimentos();
                  $scope.filtra_estabelecimentos = [];

                  $scope.$watch('distrito',function(newVal, oldVal) {
                        $scope.campo.distrito = newVal;
                  },true);
                  $scope.$watch('conselho',function(newVal, oldVal) {
                        $scope.campo.concelho = newVal;
                  },true);

                  $scope.BtnFiltraCat = function () {
                          if ($scope.campo.distrito != null && $scope.campo.concelho != null && angular.isDefined($stateParams.catSlug)) {
                              var data = {
                                           distrito:$scope.campo.distrito,
                                           concelho:$scope.campo.concelho,
                                           categoria:$stateParams.catSlug
                                         };
                              $scope.filtra_estabelecimentos = FiltraEstabelecimentos.getEstabelecimentos(data);  
                          }
                  };
}]);

In your view, I refactored in order to separate better, since it is using 3 controllers, not to confuse the origin of the method and its respective control:

  <div ng-controller="FiltraEstabelecimentos as ctrl1">
            <form>
                <div class="row">
                    <div class="col">
                        <label ng-controller="ListaDistritos as ctrl2" style="border-radius: 10px; margin: 0px 0px 10px 0px;" class="item item-input item-select">
                            <div class="input-label">
                                Distrito
                            </div>
                            <select ng-model="distrito">
                                <option ng-repeat="lista_distritos in ctrl2.distritos" value="{{lista_distritos.id}}">{{lista_distritos.titulo}}</option>
                            </select>
                        </label>
                        <label ng-controller="ListaConcelhos as ctrl3" style="border-radius: 10px;" class="item item-input item-select">
                            <div class="input-label">
                                Concelho
                            </div>
                            <select style="border-radius: 10px;" ng-model="concelho">
                                <option ng-repeat="lista_concelhos in ctrl3.concelhos" value="{{lista_concelhos.titulo}}">{{lista_concelhos.titulo}}</option>
                            </select>
                        </label>
                    </div>
                </div>
                <div style="margin:0px 10px 0px 10px;">
                    <button type="submit" ng-click="ctrl1.BtnFiltraCat();" style="background-color: #CA5B60; border:#CA5B60; border-radius: 10px;" class="button button-block button-positive">
                        <i class="ion-search"></i> Pesquisar
                    </button>
                </div>
            </form>  
        </div> 
    
14.10.2015 / 20:08
0

Good afternoon, try to get the semicolon from ng-click and select options from ng-options instead of ng-repeat. And you also put <label ng-controller="ListaConcelhos"... this controller as controller of the campo variable it would be interesting if these internal controllers were functions inside the FiltraEstabelecimentos controller, so it recognizes every body of your view. Because when you declare controllers and use variables within them, that variable will be handled by that controller and not by others.

A basic example of ng-options:

index.html (does not need any files to download)

<html ng-app="teste">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="app.js"></script>

<title>teste</title>
</head>

<body>
<nav ng-controller="controllerTeste">
    <div>
        <div>
            <select ng-model="campo" ng-options="lista_distritos.nome for lista_distritos in distritos" ng-change="mostrar()"/>
        </div>
    </div>
</nav>

</body>
</html>

app.js

angular.module('teste',[]).controller('controllerTeste', function($scope, $http){
$scope.distritos = [{
        nome : 'teste',
        cod : 1
    },{
        nome : 'teste2',
        cod : 2
    },{
        nome : 'teste3',
        cod : 3
    }];
$scope.mostrar = function(){
    alert($scope.campo.nome);
};


});
    
14.10.2015 / 18:57