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 に追加すると、最初の 3 つのサブカテゴリには結果がないため、最初の 2 つのサブカテゴリのみが表示されます。

4

1 に答える 1

2

これは非常に簡単です。ここに 2 つのソリューションがあります。1 つは Angular を使用し、もう 1 つは 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 :

前とほぼ同じ解決策ですが、ここでは、omitと呼ばれる組み込みフィルターの代わりに、angular-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 に答える