В настоящее время я работаю на участке проката автомобилей, который я строю с угловым.Множественные угловые фильтры для 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"
}
}
}]);