用于ng-repeat的多个角度滤波器 - 有更好的方法吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用于ng-repeat的多个角度滤波器 - 有更好的方法吗?相关的知识,希望对你有一定的参考价值。

我目前正在一个汽车租赁网站工作,我正在建设一个有角度的。

在汽车选择部分,用户需要能够过滤许多不同的属性,例如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"
        }
    }
}]);
答案

我理解你的担忧,但我会说你要做的第一件事就是尝试一下。用尽可能合理预期的数据进行测试,并在浏览器坏的慢速机器上尝试所有过滤器(咳嗽!IE8 ......咳嗽!)。

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

以上是关于用于ng-repeat的多个角度滤波器 - 有更好的方法吗?的主要内容,如果未能解决你的问题,请参考以下文章

用于未定义属性的 ng-repeat 过滤器

我如何有条件地更改角度滤波器的参数

如何使用多个接收到的数组正确设置 ng-repeat

ng-repeat 中的角度验证不起作用

具有数组长度条件的角度 ng-repeat

如何在角度 ng-repeat 中创建新行?