Search function in an Angularjs list

Question

Hi, I am have a function that searches in a list the occurrence of some string typed in the field that is passed as its parameter, it works well to fetch 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 did the function returns all the elements of the set! This code is that searches 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, it does, but when I delete the string that is as parameter it returns all the elements that are in .json. The fact is that the page is paged, organized of 8 in 8 elements, which are part of the . json, when I delete the string that is as parameter it returns all elements of json, it does not keep pagination! I tried to put a refresh when I was blacking out but it went wrong! Grateful for the attention!

Answer 1

From what I understood from your question your data are not being filtered correctly by paging. So I made an example where I monitor 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>