用于 ng-repeat 的多个角度过滤器 - 有没有更好的方法？答案

【问题标题】：Multiple Angular Filters for ng-repeat - Is there a better way?用于 ng-repeat 的多个角度过滤器 - 有没有更好的方法？
【发布时间】：2019-04-17 21:33:49
【问题描述】：

我目前正在使用 angular 构建一个汽车租赁网站。

在汽车选择部分，用户需要能够过滤许多不同的属性，例如 4x4、自动或手动档，以及汽车的类别，例如紧凑型、高级、跑车等。在顶部其中还需要在订购汽车方面做一些相当广泛的工作。

这很容易通过标准过滤器和每个过滤器按钮的小指令来实现，但我可以想象 ng-repeat 属性将使用 12 个过滤器多长时间。可能没什么我应该害怕的，但仍然。

我想告诉你们是否有比这更好的解决方案。

这最终肯定会变得不必要的混乱。

这就是它现在的运行方式：

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"
        }
    }
}]);

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

我理解你的担忧，但我想说你应该做的第一件事就是尝试一下。使用尽可能多的数据进行测试，并在浏览器不佳的慢速机器上尝试所有过滤器（咳！IE8...咳！）。

如果在这些条件下性能确实不可接受，那么您可以尝试制作一个接受参数的自定义过滤器，而不是链接一堆过滤器。我不确定这是否会更快，但它至少会消除很多单独的函数调用。它还可以让您完全控制优化代码。

【讨论】：