Angularjs用按钮应用价格范围过滤器

Question

我是 angularjs 的新手。我的价格范围基于 nouislider 和几种不同价格的产品。我想过滤它们，但只有在单击过滤器按钮之后。 这是我在 html 中的“幻灯片过滤器”：

            <section class="filter-section">
                <h3>Price</h3>
              <form method="get" name="price-filters">
                <span ng-click="price_slider.start = [180, 1400]" class="clear" id="clearPrice" >Clear</span>
                <div class="price-slider">
                    <div id="price-range" ya-no-ui-slider="price_slider"></div>
                  <div class="values group">
                    <!--data-min-val represent minimal price and data-max-val maximum price respectively in pricing slider range; value="" - default values-->
                    <input class="form-control" name="minVal" id="minVal" type="text" ng-model="price_slider.start[0]">
                    <span class="labels">€ - </span>
                    <input class="form-control" name="maxVal" id="maxVal" type="text" ng-model="price_slider.start[1]">
                    <span class="labels">€</span>
                  </div>
                  <input class="btn btn-primary btn-sm" type="submit" ng-click="priceFiltering('filter')" value="Filter">
                </div>
              </form>
            </section>

这是我在控制器中的价格滑块：

$scope.price_slider = {
        start: [180, 1400],
        connect: true,
        step: 1,
        range: {
            min: 10,
            max: 2500
        }
    }; 

这是我在控制器中的过滤器：

    $scope.priceFiltering = function(command){
    if (command === "filter"){
        $scope.pricefilter = function (product) {
            if ((product.price <= $scope.price_slider.start[1])&&(product.price >= $scope.price_slider.start[0])){
                return product;
            }
        };
        command = "nofilter";
    }   
}

我正在像这样使用 ng-repeat 应用过滤器：

<div ng-repeat="product in products | filter:pricefilter  | orderBy:propertyName:reverse">...
</div>

现在一开始它可以按我的意愿工作。用户选择价格滑块值（例如，最低 800 欧元和最高 1000 欧元），当他点击过滤器按钮时，它会返回正确的产品。但是，当他移动滑块后记过滤器仍处于活动状态并立即返回产品。我想始终仅在单击过滤器按钮时过滤产品。我想我已经很接近了，但我无法让它按我的意愿工作。谁能帮帮我？

Answer 1

过滤器功能的小改动应该可以工作。

您在过滤器中直接引用$scope.price_slider.start[0] 和$scope.price_slider.start[1]，而是在priceFiltering 函数中将它们设置为另一个范围，并在过滤器中分配该范围。

请看下面的代码：

$scope.priceFiltering = function(){
    $scope.minPrice = $scope.price_slider.start[0];
    $scope.maxPrice = $scope.price_slider.start[1];

    $scope.pricefilter = function (product) {
        if ((product.price <= $scope.maxPrice) && (product.price >= $scope.minPrice)){
            return product;
        }
    };
}