Question

我有一个指令，它使用延迟加载一次加载10条记录，并在用户滚动时添加。这部分工作正常。问题是我无法弄清楚如何使用文本框来过滤整个集合上的记录。由于延迟加载，列表框中只有10条记录。我在另一个不在指令中的列表框上做同样的事情并且它工作得很好，但我不能让它在指令中工作。

以下是该指令的模板：

<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>

</button>
<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>
    <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
        </label>
    </li>
    <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] }}
        </label>
    </li>
</ul>

这是指令的searchfilter：

    angular.module('ssq.shared')
    .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;
            });
        };
    });

我在主控制器的范围变量中有完整的缓存记录集，但我无法弄清楚如何在搜索指令时使用它们。

非常感谢任何帮助！

Answer 1

因为您只加载了10条记录，所以只会从这10条记录中过滤掉。您需要做的是根据查询过滤器重新加载10条记录的列表我们不会包含您加载列表的代码，但基本的做法是向ng-change添加search text box并调用load list function传递过滤器并将$scope.list重置为新结果集

使用延迟加载过滤指令中的数据

1 个答案: