I am in the process of developing a car rental website using Angular framework.
In the section where users select cars, they should be able to filter based on various attributes like 4x4 capability, automatic or manual transmission, and different categories such as compact, premium, sports cars, etc. Additionally, there is a need for detailed ordering of the cars.
Implementing this was relatively simple with standard filters and a small directive for each filter button. However, I anticipate that the ng-repeat attribute will become quite lengthy with around 12 filters. While not necessarily a problem, it might get cumbersome.
I wanted to consult with you all to see if there might be a more efficient solution available.
This current setup is likely to become unwieldy in the long run.
This is how the code looks currently:
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"
}
}
}]);