2017-10-13 23 views
0

Je suis nouveau dans angularjs. J'ai la gamme de prix basée sur nouislider et deux ou trois produits avec des prix différents. Je voudrais les filtrer, mais seulement après avoir cliqué sur le bouton de filtre. Ceci est mon "filtre slide" en html:Angularjs appliquer le filtre de gamme de prix avec le bouton

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

Voici mon curseur de prix dans le contrôleur:

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

Et voici mon filtre dans le contrôleur:

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

Je suis appliquer le filtre avec ng-repeat comme ceci:

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

Maintenant, au début, cela fonctionne comme je le veux. L'utilisateur choisit sur les valeurs de curseur de prix (par exemple min 800 € et max 1000 €) et quand il clique sur le bouton de filtre, il renvoie les produits corrects. Cependant, quand il bouge, le filtre afterwords du curseur est toujours actif et renvoie les produits immédiatement. Je voudrais filtrer les produits toujours seulement quand le bouton de filtre est cliqué. Je pense que je suis proche, mais je ne peux pas le faire fonctionner comme je veux. Quelqu'un peut-il m'aider?

Répondre

0

Une petite modification de la fonction de filtre devrait fonctionner.

Vous parlez directement à $scope.price_slider.start[0] et $scope.price_slider.start[1] dans le filtre, au lieu paramétrés un autre champs d'application en fonction priceFiltering et assignez que scopes dans le filtre.

Voir le code ci-dessous:

$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; 
     } 
    }; 
} 
+0

Merci beaucoup! Fonctionne bien :) – Lukas

+0

Pas de problème :) Je pense que vous pouvez également garder la fonction pricefilter en dehors de la fonction priceFiltering pour de meilleures performances. –

+0

Vous voulez dire le définir en dehors de la fonction priceFiltering et l'appeler ensuite? – Lukas