3

estou com um sistema de busca que apresenta o problema: - Retorna todos os valores de uma lista, quando apagado elemento do campo de pesquisa, o esperado é que se retorne somente os elementos iniciais, não todos. Esta é a função de busca que estou usando:

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

    }, true);
4
  • 2
    O mais indicado neste caso, seria no server-side você limitar a quantidade de resultados quando o parâmetro for nulo ou vazio. 25/10/2016 às 16:05
  • Posso fazer isso nos controller? 25/10/2016 às 16:10
  • Consegue editar a pergunta e adicionar o código do seu controller? 25/10/2016 às 19:57
  • Alguma resposta ajudou a resolver o problema e pode sanar dúvidas similares de outros usuários? Caso positivo não esqueça de marcar a resposta como aceita. Pra fazer isso é só clicar no ✓ do lado esquerdo da mesma (abaixo do indicador de up e down votes).
    – Sorack
    20/03/2019 às 13:30

1 Resposta 1

1

O ideal seria que você filtrasse a sua busca no servidor para não consumir recurso. Porém se você quiser limitar o número de registros no AngularJS você pode usar o filtro limitTo:

limitTo

Cria um novo array ou string contendo apenas o número especificado de elementos. Os elementos são tirados do início ou final do array base, string ou number, como específicado pelo valor e sinal (positivo ou negativo) do limite.

O uso se dá por:

HTML

{{ limitTo_expression | limitTo : limit : begin}}

Javascript

$filter('limitTo')(input, limit, begin)

No seu exemplo ficaria

$scope.services = $filter('limitTo')(data, 5, 0);

Exemplo funcional:

(function() {
  'use strict';

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

  angular
    .module('appExemploLimitado')
    .controller('LimiteController', LimiteController);

  LimiteController.$inject = ['$filter'];

  function LimiteController($filter) {
    var limite = this;
    
    iniciar();
    
    function iniciar() {
      limite.registros = [];
      limite.registros.push('Registro 1');
      limite.registros.push('Registro 2');
      limite.registros.push('Registro 3');
      limite.registros.push('Registro 4');
      limite.registros.push('Registro 5');
      limite.registros.push('Registro 6');
      limite.registros.push('Registro 7');
      limite.registros.push('Registro 8');
      limite.registros.push('Registro 9');
      limite.registros.push('Registro 10');

      limite.maximo = 5;
    }
  }
})()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script>

<div ng-app="appExemploLimitado">
  <div ng-controller="LimiteController as limite">
    Máximo de registros: <input type="number" name="input" ng-model="limite.maximo" min="1" max="10" required>
    <div ng-repeat="registro in limite.registros | limitTo:limite.maximo:0">
        <h3>{{registro}}</h3>
      </div>
  </div>
</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 .