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

  • DorkmanScott

    DorkmanScott

    14 NİSAN 2006
  • EvilControllers

    EvilControll

    20 Ocak 2008
  • metagamers

    metagamers

    13 Mayıs 2006