web-dev-qa-db-fra.com

Faire un filtre angulaire conditionnel

J'utilise actuellement une entrée de texte pour filtrer une liste d'éléments. J'aimerais que la liste ne soit pas filtrée, quelle que soit la saisie de texte, lorsqu'une variable est définie. Un conseil sur la façon dont je peux accomplir cela?

<a ng-repeat="set in data | filter: { value: search }" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>
angularjs
56
RhoVisions

Vous pouvez y parvenir si vous définissez l'expression de filtre sur '' (ou undefined) - le filtre ne sera donc pas appliqué - lorsque votre disableFilter est défini ou sinon à l'expression de filtre réelle.

Donc, en supposant que cette variable de basculement - disableFilter - soit un booléen:

<a ng-repeat="set in data | filter: (!disableFilter || '') && filterExpression">

(avec filterExpression étant quelle que soit l'expression avec laquelle vous voulez filtrer). Votre cas spécifique serait:

<a ng-repeat="set in data | filter: (!disableFilter || '') && {value: search}">

MODIFIER:

Pour expliquer comment cela fonctionne.

  1. N'oubliez pas que || et && renvoient la valeur de l'un de ses opérandes.
  2. || et && utilisent l'évaluation du court-circuit - true || (anything) renvoie true; false && (anything) renvoie false - sans évaluer l'expression (anything).
  3. '' est un faux (ou utilisez plutôt undefined, si c'est plus clair)

Et donc,

quand disableFilter === true, !disableFilter === false, le deuxième opérande de || - la chaîne vide '' - est évaluée (c'est falsy), et (!disableFilter || '') renvoie '' - une valeur de falsy qui court-circuite l'opération && et n'évalue pas le deuxième opérande de &&. La valeur de retour de l'expression est donc ''.

lorsque disableFilter === false, !disableFilter === true, qui court-circuite l'opération ||, le second opérande de && est évalué et renvoyé. La valeur de retour de l'expression est donc {value: search}.

En savoir plus sur opérateurs logiques ici

98
New Dev

Je pense que ce qui suit est une solution légèrement moins délicate. Les solutions difficiles causent des bugs pour les futurs développeurs.

Voici ma suggestion:

<a ng-repeat="set in data | filter: (shouldFilter ? filterExpression : '')">

ou

<a ng-repeat="set in data | filter: (shouldFilter ? {value: search} : '')">

Simplement, si shouldFilter, donnez-lui votre expression de filtre, sinon ne lui donnez rien. L’utilisation d’une expression ternaire simple sera plus facile à lire.

43
Ryan

Peut-être utiliser un ng-if?

<a ng-if="!myConditional" ng-repeat="set in data" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>
<a ng-if="myConditional" ng-repeat="set in data | filter: { value: search }" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>

Cela semble être la solution .

6
Aaron

Voici ce que j'ai fait. Tout d'abord, j'avais un contrôle de sélection, renseigné dans mon contrôleur, avec un élément statique (Select ...) avec une valeur de chaîne de longueur nulle:

<select data-ng-model="districtFilter" class="form-control" data-ng-options="d.DistrictId as d.DistrictName for d in districts | orderBy: 'DistrictName'"><option value="">Select...</option></select>

Ensuite, j'ai appliqué le filtre de manière conditionnelle sur la table. Il apparaît lorsque le filtre est null, le définir sur non défini le supprime:

<tr data-ng-repeat="courtEntity in courts | filter:{ 'DistrictId' : districtFilter === null ? undefined : districtFilter}">
6
steveareeno

J'ai trouvé la solution suivante plus simple et efficace

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.package=[{"PkgServiceId":null,"PkgServicesName":" HB, TLC, DLC &amp; ESR, EDTA WHOLE BLOOD, HBSAG CONFIRMATION,SERUM, Blood Cholesterol","PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":108,"ServiceName":"Family Health Package"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":70,"ServiceName":"HB, TLC, DLC & ESR, EDTA WHOLE BLOOD"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":71,"ServiceName":"HBSAG CONFIRMATION,SERUM"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":3,"ServiceDesc":"Its used to evaluate your overall health and detect a wide range of disorders","ServiceId":2,"ServiceName":"Blood Cholesterol"},{"PkgServiceId":null,"PkgServicesName":" MRI Test, HB, TLC &amp; DLC, EDTA WHOLE BLOOD","PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":107,"ServiceName":"Child Health Package"},{"PkgServiceId":107,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":"Its used to evaluate your overall health and detect a wide range of disorders","ServiceId":5,"ServiceName":"MRI Test"},{"PkgServiceId":107,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":69,"ServiceName":"HB, TLC & DLC, EDTA WHOLE BLOOD"}] ;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
      <li ng-repeat="x in package">
        {{ x.ServiceName }}
        
      </li>
    </ul>
<p>Above is the total data set without filtering.</p>
<ul>
  <li ng-repeat="x in package| filter :{PkgServiceId: null}">
    {{ x.ServiceName }}
    {{ x.PkgServiceId }}
    
  </li>
</ul>

</div>



<p>This example displays only the packages containing the packageId "null".</p>

</body>
</html>

0
Projesh Pal

J'ai eu un cas compliqué

  • Avoir une liste de disques dire qu'il produit
  • Filtrer par deux autres propriétés prop1, prop2 sélectionnées par l'utilisateur dans la liste déroulante
  • Une autre liste déroulante (prop3) a deux valeurs 1 et 2, si le filtre sélectionné par l'utilisateur ne doit pas être appliqué

Le sien est mon résultat:

ng-repeat="prod in filterdProd = 
 (products | filter : model.prop3 == 2 ? '' :  
   { 'prop1': model.prop1 || 'none', 
     'prop2': model.prop2 }) | 
  orderBy: 'productrName'"

si model.prop3 == 2 ? '' le filtre ne s'appliquera pas sinon ...

Nous pouvons également utiliser le nombre d'enregistrements en utilisant filterdProd 

0
Ali Adravi