Javascript 多重角度滤波器用于ng重复-有更好的方法吗?
我目前在一个租车网站上工作,我正在和angular一起建设这个网站 在汽车选择部分,用户需要能够过滤许多不同的属性,如4x4、自动或手动档位,以及汽车类别,如紧凑型、高级、跑车等。除此之外,还需要进行大量的汽车订购工作 这很容易通过标准过滤器和每个过滤器按钮的一个小指令来实现,但我可以想象ng repeat属性将与12个过滤器一起使用多长时间。也许没有什么我应该害怕的,但仍然 我想让你们运行的是,是否有比这更好的解决方案。 这最终必然会造成不必要的混乱 这就是它现在的运行方式: Html:Javascript 多重角度滤波器用于ng重复-有更好的方法吗?,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,我目前在一个租车网站上工作,我正在和angular一起建设这个网站 在汽车选择部分,用户需要能够过滤许多不同的属性,如4x4、自动或手动档位,以及汽车类别,如紧凑型、高级、跑车等。除此之外,还需要进行大量的汽车订购工作 这很容易通过标准过滤器和每个过滤器按钮的一个小指令来实现,但我可以想象ng repeat属性将与12个过滤器一起使用多长时间。也许没有什么我应该害怕的,但仍然 我想让你们运行的是,是否有比这更好的解决方案。 这最终必然会造成不必要的混乱 这就是它现在的运行方式: Html: 我理
我理解你的担忧,但我要说的是,你应该做的第一件事就是尝试一下。使用尽可能多的数据进行测试,并在浏览器不好的慢速机器上尝试所有过滤器(cough!IE8…cough!) 如果在这些条件下性能确实不可接受,那么您可以尝试制作一个接受参数的自定义过滤器,而不是链接一组过滤器。我不确定这是否会更快,但它至少会消除许多单独的函数调用。它还可以让您完全控制代码的优化
<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>
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"
}
}
}]);