Angularjs는 버튼으로 가격 범위 필터를 적용합니다.

Question

나는 angularjs에 새로 왔습니다. 나는 다른 가격의 누이 라이더와 몇 개의 제품을 기준으로 한 가격대를 가지고 있습니다. 필터 버튼을 클릭 한 후에 만 ​​필터링하고 싶습니다. 여기

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

이 HTML에서 내 "슬라이드 필터"입니다 다음과 같이 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; 
     } 
    }; 
}