Question

我尝试使用复选框值过滤结果。我需要能够按评级进行过滤。这是我到目前为止的代码：

    <label ng-repeat="rating in ratings">
        <input type="checkbox" value="{{rating.value}}" ng-model="rating.selected" ng-change="ratingFilter(hotel, rating)" ng-init="ratingFilter(hotel, rating, 'init')">
         {{rating.name}}
    </label>


 $scope.ratings = [
    { name:'One Star', value:1, selected: true}, 
    { name:'Two Stars', value:2, selected: true},
    { name:'Three Stars', value:3, selected: true},
    { name:'Four Stars', value:4, selected: true},
    { name:'Five Stars', value:5, selected: true}
 ]



         <div ng-repeat="hotel in (filteredHotels = (hotelResults | filter: resortFilter | filter: bbFilter | filter: priceFilter | filter: ratingFilter)) | startFrom:(currentPage - 1)*10 | limitTo:10 " class="hotel-results-container">

我需要一个ratingFilter函数，如下所示：

$scope.ratingFilter = function (hotel, rating, init) {

    return (hotel.Rating >=  $scope.hotelResults.Rating);
}

但这并不起作用。

我已经创建了priceFilter功能，这有效：

$scope.priceFilter = function (hotel) {
    return (hotel.Price > $scope.hotelResults.minPrice && hotel.Price < $scope.hotelResults.maxPrice);
}

有人可以帮助我按评分过滤结果吗？

Answer 1

我通过重写priceFilter和ratingFilter函数对它进行了排序，所以它们现在看起来像这样：

.filter('rangeFilter', function() {
   return function(hotelResults, price ) {

    var filtered = [];
    var priceMin = parseInt(price.min);
    var priceMax = parseInt(price.max);

    angular.forEach(hotelResults, function(hotel) {
      if((hotel.Price >= priceMin && hotel.Price <= priceMax)) {
        filtered.push(hotel);
      }
    });

    return filtered;
  };
})


.filter('ratingsFilter', function() {
  return function(hotelResults, ratings) {
    filteredResults = []
    angular.forEach(hotelResults, function(hotel) {
      angular.forEach(ratings, function(rating) {
        if (hotel.Rating === rating.value && rating.selected === true) {
          filteredResults.push(hotel)
        }
      })
    })
    return filteredResults;
  }
})

评级html看起来像这样：

<div class="filter--hotel__container quarter">
  <label ng-repeat="rating in ratings">
    <input name="rating" type="checkbox" ng-model="rating.selected" ng-checked="rating.selected"> {{rating.name}}
  </label>
</div>

用于定价的Slider html如下所示：

<!-- Price range slider -->
<div data-range-slider data-min="hotelResults.minPrice" data-max="hotelResults.maxPrice" data-model-min="price.min" data-model-max="price.max" data-show-values="false"></div>

<!-- Minimum price -->
<div class="hotel-search__price-min">
  <span data-ng-bind="price.min|currency:'£'"></span>
</div>

<!-- Current selected price -->
<div class="hotel-search__price-max">
  <span data-ng-bind="price.max|currency:'£'"></span>
</div>

ng-repeat代码如下所示：

<div ng-repeat="hotel in (filteredHotels = (hotelResults | filter: searchFilter | filter: resortFilter | filter: bbFilter | rangeFilter:price | ratingsFilter:ratings )) | startFrom:(currentPage - 1)*10 | limitTo:10 " class="hotel-results-container">

问题创建角度过滤功能

1 个答案: