Multiple select menu filter of data in angularJS

Question

I'm trying to achieve a filter of houses by the following:

Bedrooms
Bathrooms
Price(from)
Price(to)

I've managed to get one select menu working and filtering by bedrooms, but when i add any more filters i cant seem to get it to work together or understand the best practice to do so. below is my code as it stands right now.

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="selectBedrooms">
    <option value="all">Bedrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="3">Four</option>
</select>
<select ng-model="selectBathrooms">
    <option value="all">Bathrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<div class="house-style-list">
    <ul>
        <li ng-repeat="house in houses" ng-show="selectBedrooms=='{{house.bedrooms}}' || selectBedrooms=='all' || selectBathrooms=='{{house.bedrooms}}' || selectBathrooms=='all'">
            <a href="#/house-styles/the-astaire">        
                <img src="/images/house-styles/{{house.image}}">
                <div class="content"> 
                    <h5>{{house.name}}</h5>
                    <span class="bedrooms">{{house.bedrooms}}</span>
                    <span class="bathrooms">{{house.bathrooms}}</span>
                    <span class="price">&pound;{{house.price}}</span>
                </div>
            </a>
        </li>
    </ul>
</div>

Any point in the right direction would be greatly appreciated, thanks in advance.

Laurent · Accepted Answer · 2015-05-18 13:03:17Z

1

You don't need the ng-show attribute to filter in a ng-repeat. It is possible to filter in the ng-repeat directly.

Try with the code below:

<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="3">Four</option>
</select>
<select ng-model="search.bathrooms">
    <option value="">Bathrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<div class="house-style-list">
    <ul>
        <li ng-repeat="house in houses | filter:search:strict">
            <a href="#/house-styles/the-astaire">        
                <img src="/images/house-styles/{{house.image}}">
                <div class="content"> 
                    <h5>{{house.name}}</h5>
                    <span class="bedrooms">{{house.bedrooms}}</span>
                    <span class="bathrooms">{{house.bathrooms}}</span>
                    <span class="price">&pound;{{house.price}}</span>
                </div>
            </a>
        </li>
    </ul>
</div>

Here you have an example to use the filter for bedrooms and bathrooms. More info can be found here: https://docs.angularjs.org/api/ng/filter/filter

answered May 18, 2015 at 13:03

Laurent

6117 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roy Barber Over a year ago

Perfect thanks LaurenH, how would you handle the price filter with that being a number starting from X and ending at X

Laurent Over a year ago

Hm.. you could use a range-slider. But I've never used a range filter before.

Collectives™ on Stack Overflow

Multiple select menu filter of data in angularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related