Filter für verschachtelte Objekte, um alle untergeordneten Elemente zurückzugeben

Question

Ich habe einen Filter, der auf ng-repeat ist und Strings aller Objekte (einschließlich geschachtelte) mit einer Suchzeichenfolge vergleicht. Wenn die Suchzeichenfolge in dem Objekt gefunden wird, wird True zurückgegeben.

Ich bin auf der Suche nach einer Möglichkeit, diese Funktionalität zu erweitern, so dass wenn der Suchstring mit einer Zeichenfolge im Objekt übereinstimmt, der Filter True für das Objekt zurückgibt und True für alle verschachtelten Objekte in dem übereinstimmenden Objekt zurückgibt (Dies ist eine Baumansicht, ich suche nach einem Knoten und möchte alle untergeordneten Knoten anzeigen, wenn sie übereinstimmen).

Wie würde ich das tun?

Mein Filter sieht wie folgt aus:

.filter('deepFilter', function ($filter) { 
    return function(text) { 
     return function (value) { 
      if(text && text.length > 0) { 
       var searchTerm = text; 
       if (angular.isObject(value)) { 
        var found = false; 
        angular.forEach(value, function(v) { 
         found = found || $filter('deepFilter')(searchTerm)(v); 
        }); 
        return found; 

       } else if (angular.isString(value)) { 
        if (value.indexOf(searchTerm) !== -1) { 
         return true; 
        } else { 
         return false; 
        } 
       } 
      } else { 
       return true; 
      } 
     }; 
    }; 
    }); 

Answer 1

Die Lösung I ist durch die Verwendung einer Funktion im isString Teil des Filters gefunden, und über die Sammlung iterieren. Wenn ich das Objekt finde, suche ich nach seinen untergeordneten Objekten, die eine rekursive Funktion verwenden, und setze eine visibleAsAChild Eigenschaft für diese Objekte. Dann habe ich eine Bedingung in der isObject Auswertung hinzugefügt, um true für diese Objekte zurückzugeben, die visibleAsAChild prop haben. Ich bin mir nicht sicher, ob dies der effizienteste Weg ist, aber es funktioniert sicherlich.

.filter('deepFilter', function ($filter) { 
var currentObject; 
var setChildrenToVisible = function(node) { 
    angular.forEach(node.nodes, function(node) { 
    if(node.nodes) { 
     setChildrenToVisible(node); 
    } 
    node.visibleAsAChild = true; 
    }); 
}; 
var lookupChildren = function(o, value) { 
    // console.log(o); 
    angular.forEach(o.nodes, function(node) { 
    if (node.name === value) { 
     setChildrenToVisible(node); 
    } 
    }); 
}; 

return function(text) { 

    return function (value) { 

     if(text && text.length > 0) { 
      var searchTerm = text; 
      if (angular.isObject(value)) { 
       var found = false; 
       angular.forEach(value, function(v) { 
       found = found || $filter('deepFilter')(searchTerm)(v); 
       }); 
       if(found && value.hasOwnProperty('id')) { 
       currentObject = value; 
       } 
       if(value.hasOwnProperty('id') && value.visibleAsAChild) { 
       return true; 
       } 
       return found; 

      } else if (angular.isString(value)) { 
       if (value.indexOf(searchTerm) !== -1) { 
       if(currentObject){ 
        lookupChildren(currentObject, value); 
       } 
        return true; 
       } else { 
        return false; 
       } 
      } 
     } else { 
      return true; 
     } 
    }; 
};