0

Tenho um app móvel tenho um form que faz um filtro por distritos e concelhos o que acontece e que não esta a resgatar o dados seleccionados em casa select o botão accionado nem faz nada.

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> 
13
  • Poderia fazer um console.log(data) e postar o objeto mostrado? É provável que o data em questão contenha em um dos atributos o resultado do request. Commented 14/10/2015 às 16:51
  • Se tirar os campos que resgato dos select e deixar so a categoria consigo o botao funciona e consigo resgastar a categoria se os tiver la o botao nem funciona Commented 14/10/2015 às 16:53
  • Não se passa $scope como parâmetro no método, o $scope pertence ao controller. Commented 14/10/2015 às 17:06
  • Entao como faco ? Commented 14/10/2015 às 17:07
  • o scope é o this do controller. Commented 14/10/2015 às 17:08

2 Respostas 2

0

Primeiro crie um serviço:
OBS: Pelo que notei, você enviou a url passando parâmetros via get e não post. Por isso, defini como um método get.

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

Depois no seu controller, use o serviço criado:

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

Na sua view, eu refatorei afim de separar melhor, já que está usando 3 controllers, para não confundir a procedência do método e seu respectivo controle:

  <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> 
13
  • Da este erro no console "Error: [$injector:unpr] Unknown provider: FiltraEstabelecimentosProvider <- FiltraEstabelecimentos <- FiltraEstabelecimentos Commented 14/10/2015 às 18:31
  • Não esqueça de colocar o serviço no rodapé do seu layout. Eu acabei de reeditar, qualquer erro é bom revisar, porque eu não testei... eu fiz na raça. Commented 14/10/2015 às 18:32
  • nao lista nem os distritos nem os concelhos Commented 14/10/2015 às 18:33
  • serviços vem antes do controller. Commented 14/10/2015 às 18:39
  • sim e esta antes Commented 14/10/2015 às 18:41
0

Boa tarde grande, tenta tirar o ponto e vírgula do ng-click e no options do select usa o ng-options ao invés de ng-repeat. E você também colocou o <label ng-controller="ListaConcelhos"... esse controller como controlador da variável campo seria interessante que esses controllers internos fossem funções dentro do controller FiltraEstabelecimentos, assim ele reconhece todo corpo da tua view. Por que quando você declara controllers e usa variáveis dentro deles essa variável será tratada por aquele controller e não por outros.

Um exemplo básico do ng-options:

index.html (não precisa de nenhum arquivo para baixado)

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


});
4
  • com o ng-options nao me lista o dados Commented 14/10/2015 às 17:00
  • Como você está utilizando ng-options, seria mais ou menos assim <select ng-model="campo.distrito" ng-options = "lista_distritos.nome in lista_distritos for distritos"> Commented 14/10/2015 às 17:03
  • Não da nao mostra nada pode fazer um exemplo de codigo basedado no que tenho Commented 14/10/2015 às 17:06
  • Pronto grande coloquei na resposta um exemplo básico do ng-options Commented 14/10/2015 às 17:37

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 .