AngularJS filtre strict sur un seul champ

J'ai un formulaire avec plusieurs filtres, mais pour certains, j'ai besoin d'une stricte comparaison.

tl;dr: comparaison stricte pour user_id pas pour firstname.

<select ng-model="search.user_id">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="23">23</option>
</select>

<input type="text" ng-model="search.firstname">

<ul>
    <li ng-repeat="user in users | filter:search">#{{ user.user_id }} {{ user.firstname}}</li>
</ul>

J'ai essayé le troisième paramètre truemais il travaille aussi pour firstname filtre.

Le problème est: si vous sélectionnez la valeur 2tous les utilisateurs avec un 2 dans leur pièce d'identité sera filtré, je ne veux pas ce comportement.

Ici est la violon.

source d'informationauteur Syl

  1. 15

    j'ai essayé de corriger ça en natif, plutôt qu'avec des filtres personnalisés, de son travail, voici le PLUNKER LIEN

    avait pour spécifier plusieurs filtres tag

    <li ng-repeat="user in users | filter:{'user_id':  search.user_id}: true | filter: {'firstname' : search.firstname}">

    si il y a quelques bémols:

    1. j'ai dû changer le type de numéro de chaîne...

    2. si je réinitialiser la valeur de correspondance exacte il ne marche pas...

    alors j'ai dû écrire une coutume filer qui travaille pour une correspondance exacte & ignore vide/valeurs null

    $scope.filter2 = function(field1, field2) {
  if(field2 === "" || field2 === null) return true;
  return field1 === field2;
};

    vous trouver tous les deux dans la plunker lien

  2. 1

    Vous pourriez avoir une fonction comme ceci dans votre contrôleur

    $scope.identical = function(actual, expected){
    return actual === parseInt(expected);
}

    et puis vous pouvez l'utiliser comme ceci

    <li ng-repeat="user in users | filter:search.user_id:identical">
  3. 1

    Depuis je ne peux pas commenter sur les autres réponses, je vais faire de cette façon.

    J'ai utilisé HarisR de la solution, mais je l'ai modifié de sorte qu'il peut être utilisé avec des nombres aussi, si vous avez besoin de votre valeur en tant que nombre.

    $scope.filter2 = function(field1, field2) {
  if(field2 === "" || field2 === null) return true;
  return field1.toString() === field2;
};

    ou 

    $scope.filter2 = function(field1, field2) {
  if(field2 === "" || field2 === null) return true;
  return ""+field1 === field2;
};
  4. 1

    J'ai rencontré ce problème lorsque j'ai chargé une certaine forme de configuration à partir de Json et les numéros ont été transmis inn que le nombre pas de Chaîne. 

    <div ng-repeat="selectedComponent from ctrl.drivers.components |
     filter:{
             manufacturer: component.manufacturer, 
             type: component.type}:true">

    Quand j'ai eu un type de composant de 1 et 10 fois serait dans mon ng-repeat avant, j'ai ajouté la :true de mon filtre, et rien, quand j'avais ajouté une stricte égalité.

    Pour corriger cela, j'ai ajouté une méthode pour mon contrôleur appelé castToInt

    ctrl.castToInt = function(value){
    return parseInt(value);
};

    Puis j'ai modifié mon filtre pour afficher 

    <div ng-repeat="selectedComponent from ctrl.drivers.components |
     filter:{
             manufacturer: component.manufacturer, 
             type: ctrl.castToInt(component.type)}:true">

    Voila alors tout a fonctionné

    Ma conjecture est que :true applique une stricte égalité === de sorte que vous obtiendrez un faux si vous comparez différents types.

    Si vous pouvez accepter de changer le type de votre valeur, alors l'on a accepté la réponse est suffisante, mais si vous n'avez aucun contrôle sur les données qui sont présentées à vous, cette méthode fonctionne.

    --
    Thomas

  5. 0

    Changement dans votre code html:

    <li ng-repeat="user in users | filter:f">#{{ user.user_id }} {{ user.firstname}}</li>

    Je suppose que vous voulez and si les deux valeurs sont présents. La changer en une or si vous en avez besoin. Filtre personnalisé fonction:

    $scope.f = function(val) {
    var hasUserId = $scope.search.user_id;
    var hasName = $scope.search.firstname;

    var firstNameMatch = function() { return val.firstname.indexOf($scope.search.firstname) > -1 };
    var userIdMatch = function() { return $scope.search.user_id == val.user_id };

    if(hasUserId && hasName) {
       return  firstNameMatch() && userIdMatch()
    } else if (hasUserId) {
        return userIdMatch();
    } else if (hasName) {
        return firstNameMatch();
    }
    return true;
};

    Une modification de plus de votre contrôleur:

    $scope.search= {};

    Fourche De Violon.

  6. 0

    Si vous souhaitez effectuer une recherche par nom par exemple il suffit d'ajouter une zone de texte nom= recherche.yourFieldNameToName, si vous voulez la recherche dans tous les domaines, il suffit de créer une zone de texte avec la recherche.$ et puis il suffit d'ajouter le filtre:recherche:la stricte sur votre ng-repeat directive.

    Exemple de Code Pour mieux expliquer:

    <div class="customers view">
<div class="container">
    <header>
        <h3>Customers</h3>
    </header>
    <div class="row">
        <div class="span3">
            Search All:
            <input data-ng-model="search.$" type="text" placeholder="All Search" />
        </div>
        <div class="span3">
            Search By Name: 
            <input data-ng-model="search.firstName" type="text" placeholder="First Name Search" />
        </div>
        <div class="span3">
            Search By LastName:
            <input data-ng-model="search.lastName" type="text" placeholder="Last Name Search" />                
        </div>
        <div class="span3">
            Search By City:
            <input data-ng-model="search.city" type="text" placeholder="City Search" />
        </div>

    </div>
    <div>
        <div class="row cardContainer">
            <div class="span3 card" data-ng-repeat="customer in customers | filter:search:strict | orderBy:'firstName'">
                <button class="btn close cardClose" data-ng-click="deleteCustomer(customer.id)">&times;</button>
                <div class="cardHeader">{{customer.firstName + ' ' + customer.lastName}}</div>
                <div class="cardBody">{{customer.city}}</div>
                <a href="#/customerorders/{{customer.id}}" class="cardBody btn-link">View {{ customer.orders.length }} Orders</a>
            </div>
        </div>
    </div>
</div>