2

我需要用 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 个子类别没有结果。

4

1 回答 1

2

这很简单。这里有两种解决方案，一种使用 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;   
}

小提琴

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

与前面的解决方案几乎相同，但这里我们使用omitangular-filter 的过滤器，而不是内置的过滤器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;   
}

小提琴

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

$scope.categories = [{
    name: 'cat 1',
    results: []
}, {
    name: 'cat 2',
    results: [0, 1]
}];
于 2015-03-19T11:43:37.880 回答