Angularjsはボタン付き価格帯フィルターを適用します

Question

私はangularjsに新しいです。私はノイライダーと価格の異なる数種の製品に基づいた価格帯を持っています。フィルタボタンをクリックした後で、それらをフィルタリングしたいと思います。 これは、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; 
     } 
    }; 
}