Filtre pour le numéro de la gamme : AngularJS

J'ai un formulaire avec un input de type text, radio, etc. Lorsque je soumets le formulaire, il répertorie les détails ci-dessous le formulaire(utilisé de modèle et de la directive). Je veux faire de filtre dans l'âge , c'est à dire, le nombre de type d'entrée, de sorte que lorsque je donne une fourchette d'âge, il est important de filtrer les profils correspondants de la tranche d'âge. Voici la plunker :

http://plnkr.co/edit/h8p8rtZuAhCoKClUjgE9?p=preview

    <table border="1" style="width:200px">
   <tr>
       <td> <div>Name : {{  formElement.name }} </div><br> </td> 
   </tr>
   <tr>
       <td> <div>Age : {{ formElement.age }}</div><br> </td>
   </tr>
Vous avez besoin d'utiliser un filtre sur ngRepeat. Si vous avez besoin de trouver un moyen de partager les filterModel objet entre vos directives (soit à l'aide d'un parent ou d'un service). Notez bien, qu'il est très rare d'avoir la logique de filtrage séparé de la logique d'affichage que le filtre s'applique. Ce serait une meilleure idée de placer le filtrage des choses liées à la fasterDisplay directive.

OriginalL'auteur Anand | 2014-07-21

  1. 10

    Vous pourriez écrire un filtre personnalisé fonction qui filtre par gamme sur un domaine particulier:

    $scope.byRange = function (fieldName, minValue, maxValue) {
  if (minValue === undefined) minValue = Number.MIN_VALUE;
  if (maxValue === undefined) maxValue = Number.MAX_VALUE;

  return function predicateFunc(item) {
    return minValue <= item[fieldName] && item[fieldName] <= maxValue;
  };
};

    et de l'utiliser dans ng-repeat expression:

    <div ng-repeat="formElement in formElements | filter:byRange('age', filterModelMin.age, filterModelMax.age)">

    Noter que le filterModelMin.age et filterModelMax.age peut être utilisé directement dans fasterDisplay directive parce que les deux fasterForm et fasterDisplay n'ont pas leur propre champ d'application.

    Exemple plunker: http://plnkr.co/edit/dFbBCKxSxm9RI9dwSeYR?p=preview

    Suis-je en mesure d'utiliser cette fonction que si j'ai un objet contenant toutes mes filtres? Je suis en train d'écrire une application où je vais devoir filtre sur l'emplacement et agerange, et peut-être plus de filtres. Comment pourrais-je aller sur le faire? Mon objet ressemble à ceci: $scope.eventsfilter = {minAge: <numberrange>, maxAge: <numberrange>, postal: <string>} - ainsi, le minAge et le maxAge doit correspondre à la plage définie par l'utilisateur. (Donc, si un utilisateur veut filtrer les événements à partir de l'âge de 21 à 27, il correspond aussi à des événements à l'âge de 22 à 24).

    OriginalL'auteur runTarm

  2. 2

    Vous pouvez le faire à l'aide d'un filtre personnalisé sélectionner la fonction. Dans votre répéter que vous pouvez faire:

    <div  ng-repeat = "formElement in formElements | filter:filterAge">

    Et de la fonction suivante dans votre contrôleur:

    $scope.filterAge = function(val) {
  return (val.age > MIN_AGE && val.age < MAX_AGE);
};

    Cependant, dans votre cas, vous avez les valeurs requises (MIN_AGE et MAX_AGE) dans une autre directive et dans un autre champ. Vous pourriez partager ces valeurs à la bonne directive, soit par le biais d'un service ou de stocker les valeurs dans la portée parent et en passant de la référence dans vos directives.

    OriginalL'auteur dirkk

  3. 1

    De s'étendre sur les runTarm de réponse. Cela vous permettra d'utiliser les valeurs imbriquées avec l'opérateur point:

    $scope.byRange = function (fieldName, minValue, maxValue) {
  if (minValue === undefined) minValue = Number.MIN_VALUE;
  if (maxValue === undefined) maxValue = Number.MAX_VALUE;

  return function predicateFunc(item) {
    var keys = fieldName.split('.');
    var val = item;
    for (var i = 0; i < keys.length; i++) {
      val = val[keys[i]];
    }

    return minValue <= val && val <= maxValue;
  };
};

    utilisé dans votre ng-repeat expression comme:

    <div ng-repeat="formElement in formElements | filter:byRange('person.age', filterModelMin.age, filterModelMax.age)">

    OriginalL'auteur Dustin Rasener