0

Pessoa, como crio um formulário com alguns campos para consulta por exemplo: Nome e Telefone e um botão Consultar para enviar esses dados para o backend consultar e exibir em uma outra View o retorno em uma tabela dinâmica.

Consigo fazer isso utilizando Service normalmente, mas só funciona uma única vez, quando tento realizar a mesma consulta os dados são retornados para a minha View, porém na minha tabela aparecem os dados do backend mas também aparece "Nenhum registro foi encontrado".

No meu sistema eu tenho o form com os campos vinculados ao Controller DadosCtrl e quando eu clico em consultar o meu Service chama outra rota com outro Controller ListDadosCtrl.

Como disse, os dados são trazidos normalmente mas só funciona na primeira vez.

Não sei se utilizar um controller para envio e outro para listar é a melhor forma.

Alguém tem alguma idéia de como posso criar esse formulário para consultas?

Segue o código que estou tentando fazer. Modifiquei algumas coisas para simplificar.

// View com Form de Consulta
<form name="frmClientesConsulta">
    <div class="row cells4">
        <div class="cell">
            <label>Nome:</label>
            <input type="text" class="input-control text" ng-model="dadclientes.nome">
        </div>
        <div class="cell colspan2">
            <label>Telefone:</label>
            <input type="text" class="input-control text" ng-model="dadclientes.telefone">
        </div>
        <div class="cell">
            <button ng-click="buttonExecute('consultar')">Consultar</button>
        </div>
    </div>
</form>

Ao clicar no botão ele executa a função abaixo para enviar ao service os dados que vou enviar para o backend consultar

//Controller DadosCtrl
define(['app'], function (app) {
    'use strict';

    app.controller('DadosCtrl', ['$scope','$location','dadosCliente', function ($scope,$location,dadosCliente) {

        $scope.dadclientes = [];

        $scope.buttonExecute = function (nameAction) {
              if (nameAction == 'consultar') {
                dadosCliente.setItem($scope.dadclientes);
              } else if (nameAction == 'limpar') {
                $scope.dadclientes = [];
              };
        };


    }]);
});

o Botão chama o service abaixo para setar os valores num vetor para ser passado para o outro controller (ListDadosCtrl)

// Service dadosClientes
define(['app'], function (app) {
    'use strict';

    app.service('dadosClientes', function dadosClientes($location) {
        var dados = [];
        return {
            getItem: function () {
                return dados;
            },
            setItem: function(value) {
                dados = value;
                $location.path('/dados/list_clientes'); // Essa Rota irá apontar para a VIEW que possui a tabela dinamica e o Controller (ListDadosCtrl)
            }
        };

    });

});

Ao chamar o controller abaixo, chamo novamente o service para dar um getItem e buscar os dados que foram submetidos no form.

//Controller ListDadosCtrl
define(['app'], function (app) {
    'use strict';

    app.controller('ListDadosCtrl', ['$scope','$location','dadosClientes', function ($scope,$location,dadosClientes) {

        var dados = [];
        $scope.clientes = [];
        dados = dadosCliente.getItem();

        if (dados.telefone == "123") {

          $http.get('http://localhost:3000/clientes').success(function(data) {

              if (data.length > 0) {
                $scope.clientes = data;
              }

          });

        }

    }]);
});

Nesse controller acima, estou só fazendo um SIMULAÇÃO, caso eu passe o valor de telefone 123 ele faz um GET e executa a busca de dados de alguns clientes.

No momento em que fiz o setItem no Service, já usei o $location para acionar a outra view onde os dados serão exibidos.

// View com Tabela Dinâmica que recebe os dados do BackEnd
<table class="dataTable"
       data-role="datatable"
       data-searching="true"
       data-paging="true"
       data-language="{{language}}">
    <thead>
        <tr>
            <th>ID</th>
            <th>NOME</th>
            <th>TELEFONE</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="cliente in clientes">
            <td>{{cliente.id}}</td>
            <td>{{cliente.nome}}</td>
            <td>{{cliente.telefone}}</td>
        </tr>
    </tbody>
</table>

Como comentei no post original, a busca dos dados sempre ocorre normalmente, o get funciona blzinha, mas infelizmente só ocorre uma vez. Se eu volto no form de consulta e clico no botão novamente, os dados são exibidos na tabela porém por se tratar de um DataTable, a tabela não entende que possui registros e coloca a mensagem "Nenhum registro foi encontrado"

Talvez haja uma outra forma bem mais simples de construir o que estou precisando. Desde já agradeço.

18
  • Sem ver o seu código fica difícil ajudar, post ele também Commented 28/09/2015 às 19:56
  • Emir, obrigado por avaliar... já coloquei o código, espero que dê para entender. Vlw Commented 28/09/2015 às 21:10
  • Chegou a debugar pra ver se no teu service já não retorna? Commented 28/09/2015 às 21:26
  • Entao, o service está funcionando sempre... e retorna os dados todas as vezes. A questao é que na minha view onde está a tabela... somente na primeira consulta é que fica populada corretamente... qdo volto no form e mando consultar os mesmos dados... a tabela é populada mas fica com a informacao de nenhum registro encontrado. Entao estou vendo se é possivel fazer isso de outra maneira pra eu tentar continuar usando minha datatable normalmente. Commented 28/09/2015 às 23:55
  • Essa info de nenhum registro encontrado é um tratamento que tu faz? Commented 29/09/2015 às 0:44

1 Resposta 1

1

Veja se o exemplo abaixo lhe atende. Ao meu ver é mais amigável além de usar alguns dos melhores recursos disponíveis com angular (ordenação e filtro de tabela).

var clienteApp = angular.module("ClienteApp", []);
clienteApp.factory("$servicoGenerico", function($http, $q) {
  function ajax(url, parametros, metodo) {
    var requisicao = $http({
      method: metodo,
      url: url,
      data: parametros
    });

    var promessa = requisicao.then(function(resposta) {
        return (resposta.data);
      },
      function(resposta) {
        return ($q.reject("Something went wrong"));
      }
    );
    return promessa;
  }
  return ({
    ajax: ajax
  });
});

clienteApp.factory("$cliente", function($servicoGenerico) {
  return {
    consultarPorNomeTelefone: function(nome, telefone) {
      var promessa = $servicoGenerico.ajax("<url consulta back-end>/" + nome + "/" + telefone, "", "<metodo consulta(POST, GET, ETC...)>");
      return promessa;
    }
  };
});

clienteApp.controller("ClienteController", function($scope, $cliente) {
  $scope.ordenacao = "nome";
  $scope.ordenacaoReversa = "false";

  $scope.consultar = function() {
    /* Aqui simularia a consulta no back-end */
    //$scope.cliente = $cliente.consultarPorNomeTelefone($scope.nome, $scope.telefone);

    /* Colocando um mock para simular comportamento */
    $scope.cliente = [{
      nome: "SSA Comunicações",
      telefone: "(47)8899-6788",
      cidade: "Rio do Sul"
    }, {
      nome: "Argoville",
      telefone: "(47)3465-5435",
      cidade: "Joinville"
    }, {
      nome: "Brahma",
      telefone: "(51)4367-9877",
      cidade: "Joinville"
    }, {
      nome: "Antartica",
      telefone: "(67)8977-6655",
      cidade: "Blumenau"
    }, {
      nome: "Stackoverflow",
      telefone: "(77)8644-3334",
      cidade: "Jaraguá do Sul"
    }];
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">


<div class="container" ng-app="ClienteApp" ng-controller="ClienteController">
  <div class="form-group">
    <div class="input-group">
      <label>Nome:</label>
      <input type="text" class="form-control" ng-model="nome">
      <a href="#" class="btn btn-sucess btn-sm" ng-click="consultar();">Buscar</a>
    </div>
    <div class="input-group">
      <label>Telefone:</label>
      <input type="text" class="form-control" ng-model="telefone">
      <a href="#" class="btn btn-sucess btn-sm" ng-click="consultar();">Buscar</a>
    </div>
  </div>

  <br>
  <div class="alert alert-info">
    <p>Sort Type: {{ ordenacao }}</p>
    <p>Sort Reverse: {{ ordenacaoReversa }}</p>
    <p>Search Query: {{ filtro }}</p>
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-search"></i>
      </div>
      <input type="text" class="form-control" placeholder="Filtrar" ng-model="filtro">
    </div>
  </div>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <td>
          <a href="#" ng-click="ordenacao = 'nome'; ordenacaoReversa = !ordenacaoReversa">
                        Nome
                        <span ng-show="ordenacao == 'nome' && !ordenacaoReversa" class="fa fa-caret-down"></span>
                        <span ng-show="ordenacao == 'nome' && ordenacaoReversa" class="fa fa-caret-up"></span>
                    </a>
        </td>
        <td>
          <a href="#" ng-click="ordenacao = 'telefone'; ordenacaoReversa = !ordenacaoReversa">
                        Telefone
                        <span ng-show="ordenacao == 'telefone' && !ordenacaoReversa" class="fa fa-caret-down"></span>
                        <span ng-show="ordenacao == 'telefone' && ordenacaoReversa" class="fa fa-caret-up"></span>
                    </a>
        </td>
        <td>
          <a href="#" ng-click="ordenacao = 'cidade'; ordenacaoReversa = !ordenacaoReversa">
                        Cidade
                        <span ng-show="ordenacao == 'cidade' && !ordenacaoReversa" class="fa fa-caret-down"></span>
                        <span ng-show="ordenacao == 'cidade' && ordenacaoReversa" class="fa fa-caret-up"></span>
                    </a>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in cliente | orderBy:ordenacao:ordenacaoReversa | filter:filtro">
        <td>{{ item.nome }}</td>
        <td>{{ item.telefone }}</td>
        <td>{{ item.cidade }}</td>
      </tr>
    </tbody>
  </table>
</div>

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 .