AngularJS:为什么加载更多数据过滤器后停止工作? [英] AngularJS : why after loading more data filter stop working?

问题描述

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

there is one filter functionality in my demo I will explain my problem I have one table in which i use infinite scroll is implemented In other words when user moves to bottom it load more data.There is search input field in top .Using this I am able to filter item in table .but I don't know why it is not working

当您第一次搜索 "ubs" 和 "ing" 时，它工作得很好.但是当您加载更多数据时，当用户滚动到底部并加载更多数据时，它会再次尝试过滤ubs"和ing"它没有给出任何结果为什么?

When you search "ubs" and "ing" first time .it works perfectly .But when you load more data other words when user scroll to bottom and load more data the again it try to filter "ubs" and "ing" it not give any result why ?

<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 年的元素(我从服务中获得)并显示搜索结果的数据吗?

secondly Actually I am implementing infinite scroll so only 100 element display .can we search element from 2000 (which I am getting from service )and display data the search result ?

更新:

推荐答案

这是一个 Plunker，一切都可以协同工作.我已经把所有的部分都分成了单独的 JS 文件，因为它变得不守规矩了:

Here's a Plunker with everything working together. I have separated all of the pieces into individual JS files, as it was getting unruly:

搜索

内置过滤器只会返回 ng-repeat 显示的当前视图数据的结果.由于您不会一次将所有数据加载到视图中，因此您必须创建自己的搜索功能.

The built in filter will only return results from the current view data that the ng-repeat is displaying. Because you're not loading all of the data into the view at once, you'll have to create your own search functionality.

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

In the demo, click the search icon to show the search box, then type your search value and press the ENTER key or click the search button to return the results.

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

Since you want to check whether the user pressed ENTER you have to pass both the event and the querystring to the function, so you can check for the enter keycode. The function should also run when someone clicks or taps the search button. I set ng-model="query" on the input, so query is the reference in the view. Therefore, you'll add ng-click="searchInvoices($event, query)" to your search button, and ng-keyup="searchInvoices($event, query)" to the input. And, finally, to make it easy to clear the input field, add a button that displays when the input is not empty with ng-show="query" and attach a click event with ng-click="query=null; resetGrid()".

将 searchInvoices 函数添加到您的控制器.它只会在查询为空(因为如果此人使用退格键清空输入时需要重置视图)或用户按下 ENTER 或事件是用户点击搜索按钮时的点击事件.如果查询为空并且只是重置视图，则内部 if 语句会阻止搜索运行.如果查询不为空，则针对总数据集并构建匹配结果数组，用于更新视图.

Add the searchInvoices function to your controller. It will only run the search if either the query is empty (because you need to reset the view if the person uses the backspace key to empty the input) OR if the user pressed ENTER OR if the event was a click event in case the user clicks the search button. The inner if statement, prevents the search from running if the query is empty and just resets the view. If the query is not empty, against the total dataset and builds an array of matching results, which is used to update the view.

最后一行将滚动位置设置为滚动视图容器的顶部.这确保用户无需单击滚动视图容器中的某处即可看到结果.确保将 $ionicScrollDelegate 注入控制器以使其工作并在您的 ion-scroll 指令上设置 delegate-handle="invoicegrid".

The last line sets the scroll position to the top of the scrollview container. This makes sure that the user sees the results without having to click somewhere in the scrollview container. Make sure you inject the $ionicScrollDelegate into your controller for this to work and set delegate-handle="invoicegrid" on your ion-scroll directive.

  $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 将确保列表保持动态.

Lastly, you need to modify the loadMore() function that is used by the infinite scroll directive, so that it doesn't try to load additional data when scrolling through the search results. To do this, you can just pass the query into loadMore on the directive like: on-infinite="loadMore(query)", then in your function, you can just run the broadcast event when the query exists. Also, removing the ngIf will ensure that the list remains dynamic.

  $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');
    }
  };

这篇关于AngularJS:为什么加载更多数据过滤器后停止工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！