search function in a list angularjs

1
Hi, I have a function that searches a list for the occurrence of any string typed in the field that is passed as its parameter, it works fine for fetching these strings:

$scope.$watch('q', function(newValue, oldValue) {
		if (oldValue != null){
           $http.get('/api/services.json?q=' + newValue)
  		   .success(function (data) {
  		     $scope.services = data;});
		}
	}, true);
}]);

The problem that is presented is that when I delete any character from the search I made the function returns all elements of the set! This code looks for what was done in the function.

 <div class="search">
	<input type="text" placeholder="Buscar por serviços" ng-model="q">
</div>
<div class="banner">
 
 <div class="search">
   <input type="text" placeholder="Buscar por serviços" ng-model="q">
</div> 
 <h2 class="title" style="color: #A2121F;">Serviços em destaque
  </h2>	
 </div>
<h3 ng-if="services.length == 0">Nenhum serviço encontrado.</h3>
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>	
	<div class="col-6 services_card" ng-repeat="service in services" ng-if="service.active == true">
		<a class="section" href="{{ service.url }}">
		   <h3 class="title" >{{service.name}}</h3>		
		</a>
		</div>
	</div>                                                                                                                            

In this line $ http.get ('/ api / services.json? q =' + newValue) is to return the occurrences, in a json file, of the string, that it does, but when I delete the string it is as a parameter it returns all elements that are in .json. The fact is that the page is paginated, organized from 8 to 8 elements, which are part of .json, when I delete the string that is as a parameter it returns all elements of json, it does not keep the pagination! I already tried to put a refresh when erasing but it went wrong! Thank you for your attention!

    
asked by anonymous 23.11.2016 / 17:07

1 answer

1

As I understand your question, your data is not being filtered correctly by paging. So I made an example where I track the variable q to filter a array and apply paging. Note that not using a service makes no difference in this case:

(function() {
  'use strict';

  angular
    .module('appExemploPaginacao', []);

  angular
    .module('appExemploPaginacao')
    .controller('PaginacaoController', PaginacaoController);

  PaginacaoController.$inject = ['$scope', '$filter'];

  function PaginacaoController($scope, $filter) {
    var paginacao = this;
    var servicos = [];
    var resultados = [];
    
    iniciar();
    
    function iniciar() {
      servicos.push({nome: 'Serviço 1', ativo: true});
      servicos.push({nome: 'Serviço 12', ativo: true});
      servicos.push({nome: 'Serviço 123', ativo: false});
      servicos.push({nome: 'Serviço 1234', ativo: true});
      servicos.push({nome: 'Serviço 12345', ativo: true});
      servicos.push({nome: 'Serviço 123456', ativo: true});
      servicos.push({nome: 'Serviço 123457', ativo: true});
      servicos.push({nome: 'Serviço 1234578', ativo: true});

      paginacao.q = '';
      paginacao.pagina = 1;
      $scope.$watch('paginacao.q', monitorarQ, true);
      $scope.$watch('paginacao.pagina', monitorarPagina, true);
    }
    
    function monitorarQ() {
      resultados = $filter('filter')(servicos, {nome: paginacao.q, ativo: true});
      monitorarPagina();
    }

    function monitorarPagina() {
      var indice = (paginacao.pagina * 3) - 3;

      paginacao.visiveis = $filter('limitTo')(resultados, 3, indice);
    }
  }
})()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"type="text/javascript"></script>

<div ng-app="appExemploPaginacao">
  <div ng-controller="PaginacaoController as paginacao">
    <div>
      <input type="text" placeholder="Buscar por serviços" ng-model="paginacao.q">
      Pagina: <input type="number" name="input" ng-model="paginacao.pagina" min="1" max="10" required>
    </div>
    <div>
      <h2 class="title" style="color: #A2121F;">Serviços em destaque</h2>
      <div ng-repeat="servico in paginacao.visiveis">
        <h3>{{servico.nome}}</h3>
      </div>
    </div>
  </div>
</div>
    
23.11.2016 / 19:15