Currently, I have successfully implemented filters for bedrooms and bathrooms in my project. However, I am now looking to add a price filter that allows users to select both a minimum and maximum price to further refine their search criteria.
An ideal scenario would involve dynamically generating dropdowns based on the lowest and highest price data available in $scope.houses. Though this may seem like wishful thinking at the moment!
Controller:
angular.controller('HouseStylesCtrl', function ($scope) {
$scope.selectBedrooms = 'all';
$scope.selectBathrooms = 'all';
$scope.houses = [
{ id: 1, name: 'The Astaire', bedrooms: '1', bathrooms: '1', price: '196,995', image: 'the-astaire.jpg', showHome: false, sold: false },
{ id: 2, name: 'The Burton', bedrooms: '2', bathrooms: '2', price: '201,995', image: 'the-burton.jpg', showHome: true, sold: false },
{ id: 3, name: 'The McQueen', bedrooms: '3', bathrooms: '1', price: '196,995', image: 'the-mcqueen.jpg', showHome: false, sold: false },
{ id: 4, name: 'The Hepburn', bedrooms: '4', bathrooms: '2', price: '197,105', image: 'the-hepburn.jpg', showHome: false, sold: false },
{ id: 5, name: 'The Astaire', bedrooms: '1', bathrooms: '1', price: '196,995', image: 'the-astaire.jpg', showHome: false, sold: false },
{ id: 6, name: 'The Burton', bedrooms: '2', bathrooms: '2', price: '201,995', image: 'the-burton.jpg', showHome: false, sold: false },
{ id: 7, name: 'The McQueen', bedrooms: '3', bathrooms: '1', price: '196,995', image: 'the-mcqueen.jpg', showHome: false, sold: false },
{ id: 8, name: 'The Hepburn', bedrooms: '4', bathrooms: '2', price: '197,105', image: 'the-hepburn.jpg', showHome: false, sold: true }
];
});
View:
<select ng-model="search.bedrooms">
<option value="">Bedrooms</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
...
In conclusion, any guidance or help provided would be greatly appreciated. Thank you in advance.