Angular js ein Objekt durch Textbox Eingang filtern

Ich bin wirklich neu zu eckig, so dass dies super einfach sein kann, aber ich kann nicht scheinen, es zur Arbeit zu bekommen. Ich habe eine App mit einem Suchfeld, das die Ergebnisse aktiv filtern muss, wenn ein Benutzer eingibt. Alle meine Daten befinden sich im Objekt searchResults. Nichts passiert, wenn ich das Textfeld eintippe. Was vermisse ich? Vielen Dank im Voraus für Ihre Hilfe.Angular js ein Objekt durch Textbox Eingang filtern

<div> 
    <input ng-model="query" name="search" id="search" type="text" placeholder="search by product or category"> 
    <ul id="filteredResults" ng-if="results.length"> 
     <li ng-repeat="result in results | filteredSearchFilter | limitTo: 10">{{result.name}}</li> 
    </ul> 
</div>

filteredSearch.filter.js

module.exports = function() { 
    return function(data, keys, query) { 
     results = []; 
     if(!query){ 
     return data; 
     } else { 
     angular.forEach(data, function(obj){ 
      var matched = false; 
      angular.forEach(keys, function(key){ 
       if(obj[key]){ 
        // match values using angular's built-in filter 
        if ($filter('filter')([obj[key]], query).length > 0){ 
        // don't add objects to results twice if multiple 
        // keys have values that match query 
        if(!matched) { 
         results.push(obj); 
        } 
        matched = true; 
        } 
       } 
      }); 
     }); 
     } 
     return results; 
    };

Quelle

2016-11-18 luigilife

I erkennen Jetzt muss ich das Objekt in ein Array konvertieren. Ich brauche nur den Namenschlüssel. Irgendwelche Ideen? – luigilife

können Sie die Winkelfilter verwenden, und ng-Modell Verwendung als variable Filter

<li ng-repeat="result in results | filter:query"> 
    <div> 
     {{result .firstname}} {{result .lastname}} 
    </div> 
</li>

angular.module('myApp', []) 
 
    .controller('myCtrl', function($scope){ 
 
    
 
    $scope.results = [ 
 
    
 
    {firstname: 'john', lastname: 'smith'}, 
 
    {firstname: 'jane', lastname: 'due'}, 
 
    {firstname: 'bob', lastname: 'rand'} 
 
    
 
    ]; 
 
    
 
});

<!DOCTYPE html> 
 
<html ng-app='myApp'> 
 
<head> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body ng-controller='myCtrl'> 
 
    <div> 
 
    <div> 
 
     <input type="text" placeholder="Search" ng-model="query"> 
 
    </div> 
 
    </div> 
 

 
<ul> 
 
    <li ng-repeat="result in results | filter:query"> 
 
<div> 
 
    {{result .firstname}} {{result .lastname}} 
 
</div> 
 
</li> 
 
</ul> 
 

 
</body> 
 
</html>

Quelle

2016-11-18 03:01:26 Sajeetharan

Danke Sajeetharan. Ich muss noch etwas anderes haben, denn das funktioniert nicht für mich. Ich dachte, vielleicht wäre ein benutzerdefinierter Filter der richtige Weg. Ich habe den benutzerdefinierten Filter nicht zum Funktionieren gebracht, da ich glaube, dass ich nicht auf den Bereich zugreifen kann. Irgendwelche Ideen dazu? – luigilife

Ich habe einen Teil meines Problems herausgefunden - ich versuche tatsächlich, ein Objekt zu filtern, und ich brauche result.name als Gegenleistung. Ich habe meine Frage aktualisiert, um dies zu berücksichtigen. – luigilife

Angular js ein Objekt durch Textbox Eingang filtern

Antwort

Verwandte Themen