如何在AngularJS中使用limitTo +条件进行ng-repeat？

Question

我需要使用 ng-repeat 显示一个有限列表，应用一个条件，但我无法得到它。

我正在开发一个包含多个类别和子类别的过滤器。

对于每个类别，我需要显示最少有 1 个结果的前 5 个类别。

为此，我创建了一个 count() 函数，当用户单击任何子类别复选框时调用该函数，该函数会刷新值。

ng-repeat 的代码是：

<div class="checkbox checkbox-right" ng-repeat="(id, nombre) in subcategoria" ng-if="(filteredproductosMenos<?= ucfirst ( $categoria['abrev'] ) ?> | filter:search:strict | filter:count('<?= $categoria['campo'] ?>',id)).length">
    <input type="checkbox" ng-model="use<?= ucfirst ( $categoria['abrev'] ) ?>[id]" checked="" id="list-filters-sidebar-form-<?=$i?>-{{j}}" name="list-filters-<?=$i?>-{{j}}">
    <label for="list-filters-sidebar-form-<?=$i?>-{{j}}">{{nombre}} ({{ (filteredproductosMenos<?= ucfirst ( $categoria['abrev'] ) ?> | filter:search:strict | filter:count('<?= $categoria['campo'] ?>',id)).length }})</label>
</div>

此代码显示了最少 1 个结果的子类别，但如果我将“limitTo:5”添加到 ng-repeat，则仅显示前 2 个子类别，因为前 3 个子类别没有结果。

Answer 1

这很简单。这里有两种解决方案，一种使用 Angular，一种使用 Angular + angular-filter 模块。

解决方案 1，纯 Angular，不添加模块：

<div ng-repeat="category in categories | filter: hasResult | limitTo: 5">{{category.name}}</div>

说明：

我们过滤数组中有结果的项目，然后我们应用limitTo 过滤器。函数hasResult定义如下：

$scope.hasResult = function (category) {
    return category.results.length > 0;   
}

Fiddle

---

解决方案 2，带有模块 angular-filter 的 Angular：

与之前的解决方案几乎相同，但这里我们使用 angular-filter 的 omit 过滤器，而不是称为 filter 的内置过滤器：

<div ng-repeat="category in categories | omit: hasNoResult | limitTo: 5">{{category.name}}</div>

说明：

• omit : 这个过滤器来自 angular-filter 模块。我们删除满足函数hasNoResult 的类别。函数声明如下：

  $scope.hasNoResult = function (category) {
      return category.results.length === 0;   
  }
  

Fiddle

---

注意，对于这两种解决方案，我假设类别数组如下所示：

$scope.categories = [{
    name: 'cat 1',
    results: []
}, {
    name: 'cat 2',
    results: [0, 1]
}];