javascript - ng-repeat の複数の Angular フィルター - より良い方法はありますか?

Question

私は現在、Angularで構築しているレンタカーサイトに取り組んでいます。

車の選択セクションでは、ユーザーは、4x4、オートマチックまたはマニュアル ギア、およびコンパクト、プレミアム、スポーツカーなどの車のカテゴリなど、さまざまなプロパティでフィルタリングできる必要があります。車の注文にもかなり大規模な作業が必要です。

これは、標準フィルターと各フィルター ボタンの小さなディレクティブで簡単に実現できましたが、12 個のフィルターで ng-repeat 属性がどれくらい長くなるか想像できます。おそらく私が恐れるべきことは何もありませんが、それでも.

私があなたたちに実行させたかったのは、これよりも良い解決策があるかどうかです.

これは、最終的には不必要に面倒なことになります。

これが現在の実行方法です。

HTML:

    <div filter-btn="4x4" ng-model="filters" class="btn">4x4</div>
    <div filter-btn="manual" ng-model="filters" class="btn">manual</div>
    <input type="text" ng-model="filters.searchCar">
    <div class="car-cont">
        <div ng-repeat="car in filteredCars = (cars | filter:filters.4x4 | filter:filters.manual | filter:filters.searchCar)" class="car">{{car.model}}</div>
        <div ng-show="!filteredCars.length">No cars</div>
    </div>

JS:

angular.module('mabi').directive('filterBtn',[ function () {
    var linkFunction = function(scope, elem, attr){
        var activeFilter = attr.filterBtn;

        var clickFunction = function(){
            scope.$apply(function(){
                if (scope.model[activeFilter] != activeFilter){
                    scope.model[activeFilter] = activeFilter;
                } else {
                    scope.model[activeFilter] = "";
                }
            });
            console.log(scope.model);
        }

        elem.bind('click', clickFunction);
    }

    return {
        restrict: "A",
        require: 'ngModel',
        link: linkFunction,
        scope: {
            model: "=ngModel"
        }
    }
}]);