我已经和AngularJS合作了一段时间,这是我还不确定的一个主题。让我先举一个例子。在我的网站上,我有一个数据表。我希望能够以多种方式搜索/排序/过滤此数据。我们有一个搜索框,它使用内置的"过滤器"过滤以搜索数据。我们还有许多其他过滤器,允许用户检查复选框并获得不同的视图(想想亚马逊)。
问题是因为像分页这样的东西需要知道这些过滤器,并且必须根据过滤的数据视图而不是原始数据集来应用它的计算。
这样做会使我们的HTML看起来像这样:
<div class="row paginationInfo clearfix">
<div class="col-xs-3 showResultsWrap">
<span data-name="summary"><b>{{ getPageStart2((model.IndividualMailboxes.filtered | pipe:model.IndividualMailboxes.filters.functions:model.IndividualMailboxes.filters.values), model.IndividualMailboxes.currentPage, model.IndividualMailboxes.resultsPerPage) }} - {{ getPageEnd2((model.IndividualMailboxes.filtered | pipe:model.IndividualMailboxes.filters.functions:model.IndividualMailboxes.filters.values), model.IndividualMailboxes.currentPage, model.IndividualMailboxes.resultsPerPage) }}</b> of <b>{{ (model.IndividualMailboxes.filtered | pipe:model.IndividualMailboxes.filters.functions:model.IndividualMailboxes.filters.values).length }}</b></span>
</div>
<div class="col-xs-6 text-xs-center">
<div max-size="5" boundary-links="true" first-text="«" last-text="»" previous-text="‹" next-text="›" uib-pagination ng-show="(model.IndividualMailboxes.filtered | pipe:model.IndividualMailboxes.filters.functions:model.IndividualMailboxes.filters.values).length > 10" total-items="(model.IndividualMailboxes.filtered | pipe:model.IndividualMailboxes.filters.functions:model.IndividualMailboxes.filters.values).length" ng-model="model.IndividualMailboxes.currentPage" items-per-page="model.IndividualMailboxes.resultsPerPage" class="pagination-md"></div>
</div>
<div class="col-xs-3 resultsPerPageWrap form-inline text-xs-right">
<span>View</span>
<select sk-id-gen="resultsPerPage" name="ResultsPerPage" class="form-control m-l-1" ng-model="model.IndividualMailboxes.resultsPerPage" ng-options="val as val for val in [10, 20, 50, 100]">
</select>
</div>
</div>
这里需要注意的重要一点是,为了让分页工作,我们需要反复多次(hereIsMyArray | pipe:param1:param2).length
。
如果我错了,请纠正我,但我相信每个消化周期我们都会运行这些管道/过滤器5次以上。对于一个小的数据集,这可能没问题,但如果我开始过滤10,000个项目,那么我确定我会看到性能问题。
如果我们只需要进行1次管道/过滤,并且这些HTML组件中的每一个都可以使用过滤数据集的单个实例,那么效率会更高。
不直接在HTML中执行此操作的问题是您不再需要设置自动监视以查看数据何时更改并更新视图。
如果我的任何陈述有误,请告诉我。我很好奇,如果有人之前有这个问题,并有解决方案吗?
由于