AngularJS：为什么加载更多数据过滤器停止工作后？ [英] AngularJS : why after loading more data filter stop working?
问题描述
有在我的演示一个过滤器的功能，我会解释我的问题我有，我用无限滚动一个表中实现换句话说，当用户移动到下它加载更多data.There处于最佳。采用搜索输入字段这个我可以在表中筛选项目。但我不知道为什么它不工作
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
当您搜索的瑞银和ING第一次当您加载更多的数据换句话说。它。但完美的作品，当用户滚动至底部，并加载更多的数据它再次试图筛选瑞银和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重复正在显示当前视图数据返回结果。因为你不加载所有的数据到视图中的一次，你必须创建自己的搜索功能。
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.
在演示中，单击搜索图标显示在搜索框，然后输入您的搜索价值preSS的<大骨节病> 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.
由于要检查用户是否pressed <大骨节病> ENTER 你必须通过这两个事件和查询字符串的功能，让您可以检查回车键code。当有人点击或水龙头搜索按钮的功能也应该运行。我设置 NG-模式=查询输入，这样的查询的是在视图中提供参考。因此，您将添加 NG-点击=searchInvoices（$事件，查询）您的搜索按钮， NG-KEYUP =searchInvoices （$事件，查询）来输入。最后，可以很容易清除输入字段，添加显示一个按钮，当输入不为空与 NG-秀=查询并附加一个点击事件与 NG-点击=查询= NULL; 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功能控制器。如果任一查询为空它只会运行搜索（因为你需要，如果人使用退格键清空输入重置视图），或者如果用户pressed <大骨节病> ENTER OR如果该事件是在情况下，用户点击搜索按钮单击事件。内if语句，prevents运行搜索，如果查询是空的，只是重置视图。如果查询不为空，对总数据集并生成匹配结果，这是用来更新视图的阵列。
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到控制器这个工作和设置委托手柄=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在诸如指令：上无限=loadMore（查询），然后在你的功能，你可以运行当查询存在广播事件。另外，删除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屋！
