AngularJS：为什么在加载更多数据过滤器后停止工作？

Question

在我的演示中有一个过滤器功能我将解释我的问题我有一个表我使用无限滚动实现换句话说当用户移动到底部时它加载更多数据。顶部有搜索输入字段。使用这个我可以过滤表中的项目。但我不知道它为什么不起作用

当您搜索＆＃34; ubs＆＃34;并且＆＃34; 第一次.it工作完美。但是当你在用户滚动到底部并加载更多数据时加载更多数据时，它会尝试过滤＆＃34; UBS＆＃34;并且＆＃34; 它没有给出任何结果？

<label class="item item-input">
    <img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
    <input type="text" placeholder="Search" ng-model="query">
  </label> 

其次实际上我实现无限滚动所以只有100个元素显示。我们可以从2000搜索元素（我从服务中获取）并显示数据搜索结果吗？

更新：

Answer 1

这是一个一切都在一起工作的Plunker。我已将所有部分分成单独的JS文件，因为它变得难以驾驭：

Plunker

搜索

内置过滤器仅返回ng-repeat正在显示的当前视图数据的结果。由于您没有立即将所有数据加载到视图中，因此您必须创建自己的搜索功能。

在演示中，单击搜索图标以显示搜索框，然后键入搜索值并按 ENTER 键或单击搜索按钮以返回结果。

由于您要检查用户是否按下 ENTER ，您必须将事件和查询字符串都传递给该函数，因此您可以检查输入密钥代码。当有人点击或点击搜索按钮时，该功能也应该运行。我在输入上设置了ng-model="query"，因此 query 是视图中的引用。因此，您需要在搜索按钮中添加ng-click="searchInvoices($event, query)"，并在输入中添加ng-keyup="searchInvoices($event, query)"。最后，为了便于清除输入字段，添加一个按钮，该按钮在ng-show="query"输入不为空时显示，并附加一个带有ng-click="query=null; resetGrid()"的点击事件。

将searchInvoices功能添加到控制器。只有当查询为空时才会运行搜索（因为如果此人使用退格键清空输入，则需要重置视图）或者如果用户按 ENTER 或者事件是用户单击搜索按钮时的单击事件。如果查询为空并且只是重置视图，则内部if语句会阻止搜索运行。如果查询不为空，则针对总数据集并构建匹配结果数组，用于更新视图。

最后一行将滚动位置设置为滚动视图容器的顶部。这可确保用户无需单击scrollview容器中的某个位置即可查看结果。确保将$ ionicScrollDelegate注入控制器，以便在离子滚动指令上和设置delegate-handle="invoicegrid"。

  $scope.searchInvoices = function(evt, queryval) {
    if (queryval.length === 0 || evt.keyCode === 13 || evt.type === 'click') {
      if (queryval.length === 0) {
        $scope.invoice_records = $scope.total_invoice_records;
      } else {
        var recordset = $scope.total_invoice_records;
        results = [];
        var recordsetLength = recordset.length;
        var searchVal = queryval.toLowerCase();
        var i, j;

        for (i = 0; i < recordsetLength; i++) {
          var record = recordset[i].columns;

          for (j = 0; j < record.length; j++) {
            var invoice = record[j].value.toLowerCase();
            if (invoice.indexOf(searchVal) >= 0) {
              results.push(recordset[i]);
            }
          }
        }
        $scope.invoice_records = results;
        $ionicScrollDelegate.$getByHandle('invoicegrid').scrollTop();
      }
    }
  };

最后，您需要修改无限滚动指令使用的loadMore（）函数，以便在滚动搜索结果时不会尝试加载其他数据。为此，您可以将查询传递到指令中的loadMore，如：on-infinite="loadMore(query)"，然后在您的函数中，您可以在查询存在时运行广播事件。此外，删除ngIf将确保列表保持动态。

  $scope.loadMore = function(query) {
    if (query || counter >= $scope.total_invoice_records.length) {
      $scope.$broadcast('scroll.infiniteScrollComplete');
    } else {
      $scope.counter = $scope.counter + showitems;
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }
  };

Answer 2

您在ng-repeat ng-repeat="column in invoice_records | filter:query"内使用了错误的过滤器，而不是ng-repeat="column in invoice_records | query"

  <div class="row" ng-repeat="column in invoice_records |filter:query">
    <div class="col col-center brd collapse-sm" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
    <div class="col col-10 text-center brd collapse-sm"></div>
  </div>

Demo Plunkr