Price data filter in AngularJS

Question

I'm wanting to create a price filter, i have the filters working for bedrooms and bathrooms, but want to create a filter where the user can select a price from and a price too to refine further.

Even better scenario would be to generate the dropdowns based on the lowest and highest price data in $scope.houses, but now I'm dreaming!

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="3">Four</option>
</select>
<select ng-model="search.bathrooms">
    <option value="">Bathrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select>
    <option value="180000">&pound;180,000</option>
    <option value="190000">&pound;190,000</option>
    <option value="200000">&pound;200,000</option>
    <option value="210000">&pound;210,000</option>
    <option value="220000">&pound;220,000</option>
    <option value="230000">&pound;230,000</option>
    <option value="240000">&pound;240,000</option>
</select>
<select>
    <option value="190000">&pound;190,000</option>
    <option value="200000">&pound;200,000</option>
    <option value="210000">&pound;210,000</option>
    <option value="220000">&pound;220,000</option>
    <option value="230000">&pound;230,000</option>
    <option value="240000">&pound;240,000</option>
    <option value="250000">&pound;250,000</option>
</select>
<div class="house-style-list">
    <ul>
        <li ng-repeat="house in houses | filter:search:strict" ng-class="    {true: 'sold'}[house.sold == true]">
            <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>
                <span class="sold" ng-if="house.sold">SOLD</span>
                <span class="show-home" ng-if="house.showHome">Show Home</span>
            </a>
        </li>
    </ul>
</div>

Thanks in advance.

Answer 1

Try thisPlunker http://plnkr.co/edit/28rlbnJ8eovKl5kJZMmL?p=preview . I hope it's whats you are looking for. I don't have mush time, so you have to work on it. But i think it's a good start. I have used https://github.com/prajwalkman/angular-slider for the slider

<slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>

EDIT Or try this : http://plnkr.co/edit/FLZGOubJ4M1iPIbt8VeP?p=preview