Javascript search

Asked

Viewed 881 times

2

I have a search system that presents the problem: - Returns all values of a list, when deleted element from the search field, expected to return only the initial elements, not all. This is the search function I’m using:

$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);
javascript quest
  • 2

    The most indicated in this case, would be in the server-side you limit the amount of results when the parameter is null or empty.

  • I can do that for the controller?

  • Can edit the question and add your controller code?

  • Has any response helped solve the problem and can address similar questions from other users? If so, make sure to mark the answer as accepted. To do this just click on the left side of it (below the indicator of up and down votes).

1 answer

1

The ideal would be for you to filter your search on the server to not consume resource. But if you want to limit the number of records on AngularJS you can use the filter limitTo:

limited

Creates a new array or string containing only the specified number of elements. The elements are taken from the beginning or end of the array groundwork, string or number, as specified by the value and sign (positive or negative) of the limit.

The use is made by:

HTML

{{ limitTo_expression | limitTo : limit : begin}}

Javascript

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

In your example it would be

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

Functional example:

(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>

Browser other questions tagged javascript quest

You are not signed in. Login or sign up in order to post.