Person, how do I create a form with some fields to query for example: Name and Phone and a Query button to send this data to the backend query and display in another view the return in a PivotTable.
I can do this using Service normally, but it only works once, when I try to perform the same query the data is returned to my View, however in my table the backend data appears but also "No record was found" .
On my system I have the form with the fields linked to the Controller DataCtrl and when I click on check my Service calls another route with another Controller ListDatasCtrl.
As I said, data is usually brought in but only works the first time.
I do not know if using a controller to send and another to list is the best way.
Does anyone have any idea how I can create this form for queries?
Follow the code I'm trying to do. I've modified a few things for simplicity.
// 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>
By clicking the button it performs the function below to send the data that I will send to the backend to the service.
//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 = [];
};
};
}]);
});
Button calls the service below to set the values in a vector to be passed to the other 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)
}
};
});
});
When calling the controller below, I call the service again to give a getItem and fetch the data it were submitted in the 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;
}
});
}
}]);
});
On this controller above, I'm just doing a SIMULATION, if I pass the value 123 it does a GET and performs the fetching of data from some clients.
At the moment I made the setItem in the Service, I already used $ location to trigger the other view where the data will be displayed.
// 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>
As I commented in the original post, the search for the data always occurs normally, the get works blab, but unfortunately only occurs once. If I go back in the query form and click the button again, the data is displayed in the table but because it is a DataTable, the table does not understand that it has records and it says "No record was found"
Perhaps there is another, simpler way to build what I need. Thanks in advance.