Angular ui-select-Filterung nur ein Feld

Question

DIE LAGE:

Ich habe einen Winkel App angular ui-select mit Menschen zu suchen, und wählen Sie aus einer Datenbank.

Es funktioniert gut, außer einer Sache. Der Benutzer sollte in der Lage sein, zwischen den Personen anhand zweier Kriterien zu filtern: Name und E-Mail-Adresse.

Mit dem normalen Winkelfilter kann ich nur einen filtern. Wenn ich versuche, beide Felder zu filtern, funktioniert es nicht mehr.

Arbeitsbeispiel MIT EINEM GEBIET:

<ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%"> 

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match> 

    <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, db_data_type_id: 5}"> 

      <div ng-bind-html="person2.name | highlight: $select.search"></div> 

       <small> 
        email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span> 
       </small> 

    </ui-select-choices> 

</ui-select> 

NICHT MIT ZWEI FELDER IN DER FILTER Arbeitsbeispiel:

<ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%"> 

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match> 

    <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, email: $select.search, db_data_type_id: 5}"> 

      <div ng-bind-html="person2.name | highlight: $select.search"></div> 

       <small> 
        email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span> 
       </small> 

    </ui-select-choices> 

</ui-select> 

Das Merkwürdige ist, dass es tatsächlich funktioniert, ABER nur für das erste Zeichen. Wenn ich das erste Zeichen eintippe, markiert es es in beiden Feldern, Name und E-Mail. Aber wenn ich das zweite Zeichen eintippe funktioniert es nicht mehr (Ich habe keinen Fehler in der Konsole).

attemp UNTER VERWENDUNG PROPSFILTER VON ANGULAR SAMPLES:

<ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%"> 

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match> 

    <ui-select-choices repeat="person2 in list_people | propsFilter: {name: $select.search, email: $select.search, db_data_type_id: 5}"> 

      <div ng-bind-html="person2.name | highlight: $select.search"></div> 

       <small> 
        email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span> 
       </small> 

    </ui-select-choices> 

</ui-select> 

In diesem Fall brach es vollständig, da keine Daten mehr in der select2 und ich einige Fehler in der Konsole:

Cannot read property 'toString' of null 

Cannot read property 'length' of undefined 

die Frage (n):

Wie kann ich unter mulitple Felder filtern? Kann ich das mit normalen Filter tun? Oder muss ich einen benutzerdefinierten Filter verwenden? Aber in diesem Fall funktioniert nicht richtig?

Vielen Dank!

Answer 1

Vielleicht liegt es daran, dass der gleiche Wert ($ select.search) für beide Filter E-Mail und Name verwendet wird.

Dies erklärt auch, warum es nur mit dem ersten Zeichen funktioniert.

Verwenden Sie separate Werte für jeden Filter dieses Problem zu beheben:

<ui-select-choices repeat="person2 in list_people | filter: {name: $select.search.name, email: $select.search.email, db_data_type_id: 5}"> 
... 

Answer 2

können Sie Eigenschaft Filter verwenden, wie unten

<ui-select ng-model="emplyee" theme="bootstrap"> 
<ui-select-match placeholder="Select ...">{{$select.selected.firstName+" "+$select.selected.lastName}}</ui-select-match> 
<ui-select-choices repeat="emp in employees | propertyFilter: {firstName:$select.search, lastName:$select.search}"> 
<span ng-bind-html="emp.firstName+' '+emp.lastName | highlight: $select.search"></span> 
</ui-select-choices> 

Sie das Property wie unten ändern müssen:

.filter('propertyFilter', function($log) { 
return function(items, props) { 
    var out = []; 
    if (angular.isArray(items)) { 
    items.forEach(function(item) { 
     var itemMatches = false; 
     var keys = Object.keys(props); 
     var optionValue = ''; 
     for (var i = 0; i < keys.length; i++) { 
      optionValue = item[keys[i]] ? optionValue + item[keys[i]].toString().toLowerCase().replace(/ /g, '') : ''; 
     } 
     for (var j = 0; j < keys.length; j++) { 
      var text = props[keys[j]].toLowerCase().replace(/ /g, ''); 
      if (optionValue.indexOf(text) !== -1) { 
       itemMatches = true; 
       break; 
      } 
     } 
     if (itemMatches) { 
      out.push(item); 
     } 
     }); 
     } else { 
      // Let the output be the input untouched 
      out = items; 
     } 

     return out; 
    }; 
}) 

Die Suche kann für den Wert der Option als Ganzes durchgeführt werden. Zum Beispiel, wenn Sie in 'peter parker' haben, können Sie mit 'peter', 'parker', 'peter parker', 'peterparker' suchen und sogar zwischen mehreren Zeichen von peter parker suchen.

Answer 3

Ich habe ein paar herumschweben gesehen, wie die Antwort von Kunsingh, die mich dazu brachte, mein ähnliches Problem zu lösen. In meinem Fall wurde nach mehreren und in Objekten gesucht, aber ich sende auch logisch gelöschte Datensätze an den Client und filtere sie optional in Listen. Für Dropdowns wollte ich das immer entfernen, ohne die API ändern zu müssen.

Hier ist meine geänderte Version, die die Suche nach Objekten enthält. Offensichtlich funktioniert das nur, wenn alle Ihre Tabellen eine int-Spalte mit dem Namen Gelöscht (für mich ist ein Teil des eindeutigen Schlüssels und beim Löschen auf den Identitätswert gesetzt) ​​haben und Sie diese an den Client übergeben.

Zu einem späteren Zeitpunkt plane ich, weiter zu ändern, um rekursives Suchen von Objekten zu ermöglichen.

und ein Beispiel davon (mit select2 für angular). Dies ist ein Drop-Down von Staat/Land mit Land als Unterobjekt des Staates.

<ui-select ng-model="personneladdress.StateID" theme="select2" class="select2"> 
    <ui-select-match placeholder="{{language.State}}">{{$select.selected.StateName}}</ui-select-match> 
    <ui-select-choices repeat="item.StateID as item in State | dropdownFilter: {StateName: $select.search, Country: {CountryName: $select.search}}"> 
     <span ng-bind-html="item.StateName | highlight: $select.search"></span><br /> 
     <small> 
      <span ng-bind-html="''+item.Country.CountryName | highlight: $select.search"></span> 
     </small> 
    </ui-select-choices> 
</ui-select>