Question

我的应用程序的几个部分中一个非常常见的功能是一个搜索框，它接受一个字符串，然后根据字符串过滤表。

我的目标是能够允许用户输入内容并在几毫秒的延迟后自动更新结果。即无需点击输入按钮。

使用AngularJs过滤器完成数据的排序。但是，在我们更新过滤器之前，我相信我们首先必须了解用户已完成输入并正在等待结果。

所以我绘制了将附加到搜索输入框的指令。

<input type="text"  update-filter placeholder="Enter search term">


 //and the directive goes like this
app.directive('updateFilter', [ '$timeout', function($timeout){
  var delay;
  return {
    link: function(scope, element){
         element.on('keypress', function(){
            if(!delay) {
                delay = $timeout(function() {
                  //perform the activity of updating the filter here
                 delay = undefined;
                },50);
           }
        }
     }
  }
});

我的问题是，这是解决这个问题的正确方法还是有更好的解决方案？

Answer 1

你这太复杂了。角度可以更轻松地完成。

<input type="text" ng-model="query" ng-model-options="{ debounce: 200 }"
  ng-change="doSearch()">

使用$scope.query访问控制器中的查询。定义$scope.doSearch()进行搜索。 debounce选项用于在用户输入完成后等待200ms。

Answer 2

当我编写过滤器时，我在过滤器输入上使用ng-model来访问过滤器值，然后直接在ng-repeat过滤器值中使用该值。例如，这里是获取过滤器值的输入：

<input type="text" ng-model="user_filter" />

这是一个重复的表格行，按照上面建模的值进行过滤：

<tr ng-repeat="user in users | filter: user_filter">

一旦键入，angular会注册新值并应用过滤器。无需等待或执行任何操作，因为angular会为您应用映射的值。

查看Angular docs on filter。它在页面底部有一个工作示例，显示了这一点。

在angularJs中编写搜索文本框的正确方法

2 个答案: