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

我在ng-repeat中添加了filter：priceFilter。每当重新加载页面时都会调用它。但是，当价格范围发生变化时，我想称之为。

<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）添加到您的rangelider div并从那里调用priceFilter方法？

Answer 2

我有同样的问题..我找到鼠标释放事件，但仍然没有准确。

但是我通过$ watch解决了这个问题，它只是很慢但工作正常..

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

如何使用angularjs中的范围滑块进行过滤

2 个答案: