使用Angular进行延迟搜索

我正在使用Angular的项目之一的搜索控件。我正在尝试延迟响应，例如搜索框应该等待2秒才能调用相关函数。使用Angular进行延迟搜索

当我在网上搜索时，大部分建议都是使用指令。我不能使用指令，因为点击搜索结果依次显示另一组结果。在网络上沉思之后，我得到了另一个解决方案。

我的代码：

<div ng-controller="ReportCtrl" ng-app="pReport"> 
    <input type="text" ng-model="searchString" placeholder="Search"/> 
    <div ng-show="display == 'search'"> 
     <ul> 
      <li ng-repeat="i in batches"> 
       <a ng-click='selectBatch(i.batchnumber)'>{{i.batchnumber}}</a> 
      </li> 
     </ul> 
    </div> 
    <div ng-show="display == 'repdetail'"> 
     <ul> 
      <li ng-repeat="i in reports"> 
       <a href='{{i.filename}}'>{{i.screenname}}</a> 
      </li> 
     </ul> 
    </div> 
</div>

角表达式

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

    app.controller('ReportCtrl', function ($scope, $http, $timeout) { 

     var timer = false; 
     $scope.batches = []; 
     $scope.reports = []; 
     $scope.$watch('searchString', function() { 

      if (timer) { 
       $timeout.cancel(timer); 
      } 
      timer = $timeout(function() { 

       $http({ }). //POSTING DETAILS 
       success(function (data, status, headers, config) {}); //SEARCH RESULTS 
      }, 1000) 
     }); 
     $scope.selectBatch = function (batchNumber) { } // SEARCH FURTHER 
    });

这有什么错在拖延的这种做法？
我应该使用指令吗？
有没有其他最有效的方法？

在此先感谢您的帮助！

来源

2014-02-12 Vyas Rao

更好的方法是使用一个指令。既然你对这种方法不感兴趣，那就没问题了。这种方法没有错。 – BKM

你在找什么是debounce。 Lodash开箱即用提供此功能。好消息是Angular在即将推出的版本built-in中获得了该功能。

它防止在给定的时间段内多次执行一个函数。这对于类似于在开始向服务器发送另一个请求和一般事件处理之前想要等待的类型提前搜索框的情况是理想的。

在这种情况下，我会取下手表和招$http调用自身的功能封装在抖：

$scope.search = function() { 
    _.debounce($http(...), 1000, { leading: false, trailing: true }) 
}

的leading和trailing只是配置时会出现反跳，在我们的我们希望它在最初的1000次等待之后发生。

，然后改变输入框使用ng-change所以它触发功能时，在一些用户的类型，但只有一次，每1000毫秒：

<input type="text" ng-model="searchString" placeholder="Search" ng-change="search()"/>

来源

2014-02-12 14:30:07

使用Angular进行延迟搜索

回答

相关问题