AngularJS-Filter basierend auf einem Array von Strings?

Question

Ich habe Schwierigkeiten, meinen Kopf darum zu wickeln, wie man einen Angular-Filter macht, um ein Problem zu lösen, in das ich hineingeraten bin.

Hier ist ein einfaches Beispiel meiner Datenstruktur, eine Reihe von Aufgaben:

var tasks = [ 
    { Title: "This is a task title", 
     Tags: ["Test","Tag","One","Two","Three"] }, 
    { Title: "Another test tag title", 
     Tags: ["Some", "More", "Tags"] }, 
    { Title: "One more, why not", 
     Tags: ["I","Like","Dirt"] }, 
    { Title: "Last one!", 
     Tags: ["You","Like","Dirt"] } 
]; 

So jedes Objekt eine Reihe von Tags hat. Als Beispiel nehmen wir an, dass ich jedes dieser Objekte als eine Zeile in einer Tabelle ausgabe.

Sobald die Seiten ng-Controller initialisiert wird, bin ich alle Tags aus allen Aufgaben (ohne Duplikate) greifen und sie in ein tags Array Montag.

Dann gebe ich diese Tags als umschaltbare Schaltflächen auf der Seite aus. Alle Schaltflächen sind standardmäßig blau, dh "aktiv" (mit anderen Worten: Aufgaben mit diesem Tag anzeigen). Ich muss in der Lage sein, auf eine dieser Schaltflächen zu klicken, um dieses Tag "auszuschalten" - was alle Aufgabenzeilen in der Tabelle ausfiltert, in denen die Aufgabe dieses Tag hat.

Wie so für visuelle Referenz - grau = "verstecken Aufgaben, deren Tags enthält dieses Tag", blau = "zeigen Aufgaben, deren Tags enthalten diesen Tag":

.

Wenn Sie auf eine Schaltfläche klicken, wird sie grau und filtert alle Aufgaben in der Tabelle aus, die dieses Tag haben. Ich kann dann erneut auf die Schaltflächen klicken, um dieses Tag wieder einzuschalten und alle Aufgaben mit diesem Tag erneut anzuzeigen.

Erkläre ich das deutlich genug? Es ist ein verwirrendes System.

Auf jeden Fall habe ich versucht, die folgenden:

ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }" ohne Erfolg.

Jemand Geist, der mir in die richtige Richtung zeigt? :)

PS: Ich hatte diese Arbeit zu Beginn dieser Woche durch eine filterByTag(tag) Funktion in meinem Controller aufrufen. Dies würde jede Aufgabe in dem Aufgabenfeld durchlaufen, und wenn es das übereinstimmende Tag hätte, würde es diese Aufgabe verbergen. In ähnlicher Weise Reaktivierung ein Tag würde das gleiche tun, durchschleifen alle und arbeiten die Magie ... aber mir wurde gesagt, dass meine Methode langsam + Overkill war, weil "eckige Filter all das für Sie behandeln können, und es wird bestmöglicher sein ". Deshalb, warum ich hier bin und versuche, herauszufinden, wie man Angular die Arbeit für mich machen lässt :)

Jede Hilfe wird geschätzt!

Answer 1

Sie könnten eine benutzerdefinierte filter schreiben. Der Filter würde die Liste der aktiven Tags tags und das zu filternde Aufgabenfeld tasks erhalten und ein Array gefilterter Tags ausgeben. Es wird ähnlich wie das, was Sie bereits getan haben, aber ohne zusätzliche Funktion für das Oszilloskop.

angular.module('myApp').filter('selectedTags', function() { 
    return function(tasks, tags) { 
     return tasks.filter(function(task) { 

      for (var i in task.Tags) { 
       if (tags.indexOf(task.Tags[i]) != -1) { 
        return true; 
       } 
      } 
      return false; 

     }); 
    }; 
}); 

Dann können Sie es wie folgt fiddle

<ul> 
    <li ng-repeat="task in tasks | selectedTags:tags"></li> 
</ul> 

Check-out nutzen.