how to do filter using range slider in angularjs

Question

In my application, I have used pricing slider. When I change minimum and maximum value of pricing slider, I need to filter based on the range. In angularjs, how to do this one. Can you please any one help me.

$scope.min_price = 0;
$scope.max_price = 10000;

$scope.priceFilter = function (hotel) {
  console.log(hotel.AvailableRoom[0]);
  if(hotel.AvailableRoom[0] !== null && hotel.AvailableRoom[0].HotelRoom.Price != null){
    console.log(hotel);
    return (hotel.AvailableRoom[0].HotelRoom.Price.Amount >= $scope.min_price && hotel.AvailableRoom[0].HotelRoom.Price.Amount <= $scope.max_price);
  }
  else if(hotel.AvailableRoom.HotelRoom[0].Price != null) {
    console.log(hotel);
    return (hotel.AvailableRoom.HotelRoom.Price.Amount >= $scope.min_price && hotel.AvailableRoom.HotelRoom.Price.Amount <= $scope.max_price);
  }
};

and I have added filter:priceFilter in ng-repeat. It is called whenever reload page. But I want to call this one when price range is changed.

<div id="rangeslider" range-slider min="0" max="1000" model-min="min" model-max="max" ></div>

above is pricing slider.

mer10z_tech · Accepted Answer · 2014-05-19 15:11:23Z

1

Have you tried adding an ng-mouseup (https://docs.angularjs.org/api/ng/directive/ngMouseup) to your rangeslider div and calling your priceFilter method from there?

answered May 19, 2014 at 15:11

mer10z_tech

6947 silver badges13 bronze badges

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

Comments

Liam Sorsby · Accepted Answer · 2014-09-25 11:19:04Z

i have same problme.. and i finding the mouse-release event, but still not got exact.

but i solve this problem by $watch and it's just slow but working properly..

$scope.$watch( '[demo7.maxPrice, demo7.minPrice]', function() {
    $scope.filterByPriceRange();
});


$scope.filterByPriceRange = function() {
    $rootScope.filteredRooms = [];
    angular.forEach(
        $rootScope.filteredRoomsByPricingType,
        function(availableRoom) {
            for (i in availableRoom.roomPricings) {
                if (availableRoom.roomPricings[i].price >= $rootScope.demo7.minPrice
                && availableRoom.roomPricings[i].price <= $rootScope.demo7.maxPrice
                && availableRoom.roomPricings[i].pricingType.pricingType == $rootScope.pricingType) {
                $rootScope.filteredRooms
                .push(availableRoom);
            }
        }
    });
};

Collectives™ on Stack Overflow

how to do filter using range slider in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related