AngularJS strengen Filter auf nur ein Feld

Question

Ich habe ein Formular mit mehreren Filtern, aber für einige brauche ich einen strengen Vergleich.

tl; dr: strenger Vergleich für user_id nicht für 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> 

habe ich versucht, den dritten Parameter true aber es funktioniert auch für firstname Filter.

Das Problem ist: Wenn Sie den Wert 2 auswählen, werden alle Benutzer mit einer 2 in ihrer ID gefiltert werden, möchte ich dieses Verhalten nicht.

Hier ist die fiddle.

Answer 1

ich versucht habe es nativ zu beheben, anstatt mit benutzerdefinierten Filtern, seine Arbeits, hier ist die PLUNKER LINK

musste mehrere Filter Tag

angeben

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

obwohl es einige Einschränkungen:

1. i die Art ändern musste von Nummer String ...

2. wenn ich den Wert der genauen Übereinstimmung zurückgesetzt tut es Arbeit ...

so dann hatte ich einen benutzerdefinierten Filer zu schreiben, das für eine genaue Übereinstimmung funktioniert & ignoriert leer/null Werte

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

Sie würden beide in der mitgelieferten Plunker Link

Answer 2

Sie könnten eine Funktion wie diese in Ihrem Controller

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

haben und dann könnte man es wie diese in Ihrem HTML

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

Answer 3

ändern verwenden:

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

Ich gehe davon aus Sie möchten and, wenn beide Werte vorhanden sind. Ändern Sie es zu einem or, wenn Sie müssen. Benutzerdefinierte Filterfunktion:

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

Eine weitere Änderung an Ihrem Controller:

$scope.search= {}; 

Forked Fiddle.

Answer 4

finden Da ich auf andere Antworten Kommentar kippe ich es auf diese Weise tun.

Ich habe die Lösung von HarisR verwendet, aber ich habe sie so modifiziert, dass sie auch mit Zahlen verwendet werden kann, wenn Sie Ihren Wert als Zahl benötigen.

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

oder

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

Answer 5

ich in dieses Problem lief, wenn ich irgendeine Form Konfiguration von Json geladen und die Zahlen wurden inn als Zahl nicht String übergeben.

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

Wenn ich hatte eine Komponente der Art 1 und 10 beide in meinem ng-repeat zeigen würden, bevor ich die :true meinen Filter hinzugefügt, und nichts, wenn ich strikte Gleichheit hinzugefügt hatte.

dies zu beheben Ich habe eine Methode, um mein Controller castToInt

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

Dann modifizierte ich meine Filter genannt

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

Voila zeigen dann alle es funktionierte

Meine Vermutung ist, dass :true erzwingt strenge Gleichheit === so erhalten Sie eine falsche, wenn Sie verschiedene Arten vergleichen.

Wenn Sie akzeptieren können, den Typ Ihres Werts zu ändern, dann ist die akzeptierte Antwort ausreichend, aber wenn Sie keine Kontrolle über die Daten haben, die Ihnen präsentiert werden, funktioniert diese Methode.

-. Thomas

Answer 6

Wenn Sie mit dem Namen zum Beispiel suchen möchten fügen Sie einfach ein Textfeld mit dem Namen = search.yourFieldNameToName, wenn Sie in allen Bereichen suchen, will nur eine Textbox mit Such erstellen $ und dann Füge einfach einen Filter hinzu: search: strict für deine ng-repeat-Direktive.

Beispielcode besser erklären:

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