Rani Radcliff Rani Radcliff - 1 year ago 46
AngularJS Question

Filter Data in Directive Using Lazy Load

I have a directive that uses lazy loading to load 10 records at a time and add as the user scrolls. This part works fine. The problem is that I cannot figure out how to use a textbox to filter the records on the entire set. Because of the lazy loading there are only 10 records in the listbox. I do this same thing on another listbox that is not in a directive and it works great, but I cannot get it to work in the directive.

Here is the template for the directive:

<div class="pec-checkbox-picklist btn-group btn-group-picklist">
<button id="{{itemId}}" class="form-control dropdown-toggle" data-toggle="dropdown">
<span class="cbpl-btn-text">{{ getSelectedCount() }} {{ title }}</span><span class="caret"></span>

<ul class="dropdown-menu dropdown-menu-complex" data-complex-menu style="overflow-y: scroll" lazy-load load-more="loadMore()">
<li class="list-group-item search-item">
<input class="form-control" type="text" placeholder="{{ searchPlaceholder }}" ng-model="query" />
<button type="button" class="btn btn-small" ng-show="query" ng-click="query = undefined">clear</button>
<li class="divider" ng-hide="query"></li>
<li class="list-group-item" ng-hide="query">
<label class="checkbox">
<input type="checkbox" ng-click="allSelected(list)" ng-checked="allNeedsMet(list)">
Select All
<li class="divider"></li>
<li class="list-group-item" ng-repeat="item in list | searchFilter:nameProp:query">
<label class="checkbox" title="{{ item[nameProp] }}">
<input type="checkbox" ng-model="item.selected" ng-change="callbackFn({object: item})">
{{ item[nameProp] }}

here is the searchfilter for the directive:

.filter('searchFilter', function () {
return function (items, propName, query) {
if (!query) return items;

return _.filter(items, function (item) {
return item[propName].toUpperCase().indexOf(query.toUpperCase()) !== -1;

I have the entire cached recordsets in scope variables in the main controller but I cannot figure out how to use them in the search for the directive.

Any assistance is greatly appreciated!

Answer Source

Because you only have 10 records loaded, you are only filtering from those 10 records. What you need to do is reload the list of 10 records based on the query filter.
Your code for loading the list is not included but the basic would be to add an ng-change to the search text box and call the load list function passing in a filter and resetting the $scope.list to the new result set