Angular intelligente Suche auf Wildcard

Question

Sagen Sie bitte ein Array mit den folgenden Objekten gefüllt haben:

{id: Integer, name:'String'} 

Nehmen wir zum Beispiel die folgende Array:

$scope.users = [{ 
      id: 1, name: 'Marc Edgelund main' 
    }] 

Sie dann diese Objekte zeigen in der folgenden übrigens:

Dann haben Sie die folgende html:

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

    <table> 
    <thead> 
     <th>id</th> 
     <th>Name</th> 
    </thead> 
    <tbody> 
     <tr ng-repeat="user in users | filter:search"> 
     <td> 
      {{user.id}} 
     </td> 
     <td> 
      {{user.name}} 
     </td> 
     </tr> 
    </tbody> 
    </table> 

Jetzt sagen Sie nach der Zeichenfolge suchen: Marc Main das Ergebnis wird auf leer drehen.

Dies liegt daran, Winkel prüft den Wert des Objekts und an die Zeichenfolge übereinstimmt. Im obigen Beispiel könnten Clients eines Systems jedoch keine "mittleren" Namen als Suchparameter verwenden, was bedeutet, dass die Suche inkonsistent ist und den Endbenutzer verärgert, da sie nicht in der Lage sind, das zu finden, wonach sie suchen.

Meine Frage ist, wie Sie eine intelligente Suchfunktion erstellen, die die obige Funktionalität erlaubt? Hier

ist eine Geige, die mein Beispiel zeigt:

Fiddle

Answer 1

ich etwas ähnliches wie hier Ihre Frage gefunden haben: AngularJS filter for multiple strings.

Ich habe Surfbuds 'Antwort kombiniert, um den Eigenschaftsnamen zu übergeben, den Sie filtern möchten, mit der Looping-Logik von Matthew Bergs Antwort, um eine funktionierende Lösung zu erhalten. Volle Anerkennung dieser beiden für die großartigen Erklärungen in ihren Posten. Kombiniert wird es

var app = angular.module('myApp', []); 

app.filter('filterByObjectName', function() { 
return function (input, searchText, propertyName) { 
    var returnArray = []; 
    var searchTextSplit = searchText.toLowerCase().split(' '); 
    for (var x = 0; x < input.length; x++) { 
     var count = 0; 
     for (var y = 0; y < searchTextSplit.length; y++) { 
      let propertyValue = input[x][propertyName]; 
      if (propertyValue.toLowerCase().indexOf(searchTextSplit[y]) !== -1) { 
       count++; 
      } 
     } 
     if (count == searchTextSplit.length) { 
      returnArray.push(input[x]); 
     } 
    } 
    return returnArray; 
} 
}); 

app.controller('mainController', ['$scope', function ($scope) { 
$scope.search = 'Marc'; 
$scope.users = [ 
    { 
     id: 1, 
     name: 'Marc Edgelund main' 
    } 
]; 
}]); 

Und Ihre html wird:

<table> 
<thead> 
    <th>id</th> 
    <th>Name</th> 
</thead> 
<tbody> 
<tr ng-repeat="user in users | matchAccessLevel:search:'name'"> 
    <td>{{user.id}}</td> 
    <td>{{user.name}}</td> 
</tr> 
</tbody> 
</table>