SORU
8 Mart 2013, Cuma


Nasıl AngularJS üzerinde bir gecikme Anında Arama koymak?

AngularJS yeni duyuyorum, ve adres gibi görünmüyorum bu bir performans sorunu var. Her keyup arama başladığı için hızlı arama var ama biraz kart her ikisi de, ().

JS:

var App = angular.module('App', []);

App.controller('DisplayController', function($scope, $http) {
$http.get('data.json').then(function(result){
    $scope.entries = result.data;
});
});

HTML:

<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:searchText">
<span>{{entry.content}}</span>
</div>

JSON veri olmasa bile büyük, 300 KB sadece, sanırım ihtiyacım olan şey gerçekleştirmek için bir gecikme ~1 sn aramak için beklemek için kullanıcı için son yazmak yerine, sahne eylem, her tuş vuruşu. AngularJS bu içten ve burada dokümanlar ve diğer konuları okuduktan sonra, belirli bir cevap bulamadım.

Anında Arama gecikme ben nasıl herhangi bir işaretçiler takdir ediyorum. Teşekkürler.

CEVAP
28 AĞUSTOS 2013, ÇARŞAMBA


GÜNCELLEME

Şimdi her zamankinden daha kolay (Açısal 1.3), sadece model üzerinde debounce bir seçenek ekleyin.

<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">

Güncelleştirilmiş plunker:
http://plnkr.co/edit/4V13gK

NgModelOptions belgeler:
https://docs.angularjs.org/api/ng/directive/ngModelOptions

Eski yöntem:

İşte kendisi açısal dışında hiçbir bağımlılıkları ile başka bir yöntem.

Bir zaman aşımı ayarlayın ve son sürümü ile geçerli dize karşılaştırmak gerekir, eğer ikisi de aynı ise o zaman arama yapar.

$scope.$watch('searchStr', function (tmpStr)
{
  if (!tmpStr || tmpStr.length == 0)
    return 0;
  setTimeout(function() {

    // if searchStr is still the same..
    // go ahead and retrieve the data
    if (tmpStr === $scope.searchStr)
    {
      $http.get('//echo.jsontest.com/res/'  tmpStr).success(function(data) {
        // update the textarea
        $scope.responseData = data.res; 
      });
    }
  }, 1000);
});

ve bu sana ters gider:

<input type="text" data-ng-model="searchStr">

<textarea> {{responseData}} </textarea>

Zorunlu plunker: http://plnkr.co/dAPmwf

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BradleyWuzHere

    BradleyWuzHe

    25 NİSAN 2011
  • LimeFire

    LimeFire

    2 ŞUBAT 2012
  • mliskIT

    mliskIT

    29 Mart 2012