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

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

1 个答案: