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重複的過濾器：

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