如何在angularjs中使用範圍滑塊進行過濾器

Question

在我的應用程序中，我使用了定價滑塊。當我更改定價滑塊的最小值和最大值時，我需要根據範圍進行過濾。在angularjs中，如何做到這一點。你可以請任何人幫助我。

$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); 
    } 
}; 

我添加了filter：priceFilter in ng-repeat。每當重新加載頁面時都會調用它。但是當價格範圍發生變化時，我想打電話給他們。

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

上面是定價滑塊。

Answer 1

您是否曾嘗試將ng-mouseup（https://docs.angularjs.org/api/ng/directive/ngMouseup）添加到您的rangeslider div並從那裏調用priceFilter方法？

Answer 2

我有同樣的問題..我找到鼠標釋放事件，但仍然沒有確切的。

，但我解決了$關注此問題，它只是緩慢，但工作正常..

$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); 
      } 
     } 
    }); 
};