Filtre AngularJS basé sur un tableau de chaînes ?

Question

J'ai du mal à comprendre comment créer un filtre angulaire pour résoudre un problème que je rencontre.

Voici un exemple de base de ma structure de données, un ensemble de tâches :

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"] }
];

Ainsi, chaque objet possède un tableau de balises.À titre d'exemple, disons que je génère chacun de ces objets sous forme de ligne dans un tableau.

Une fois les pages ng-controller initialisées, je suis récupérer toutes les balises de toutes les tâches (sans doublons) et en les assemblant dans un tags tableau.

Ensuite, j'affiche ces balises sous forme de boutons bascules sur la page.Tous les boutons sont bleus par défaut, signifiant « actifs » (en d'autres termes :afficher les tâches contenant cette balise).Je dois pouvoir cliquer sur l'un de ces boutons pour "désactiver" cette balise, ce qui filtrera toutes les lignes de tâches du tableau dans lesquelles la tâche comporte cette balise.

Comme ceci pour référence visuelle -- gray = "masquer les tâches dont les balises contiennent cette balise", blue = "afficher les tâches dont les balises contiennent cette balise" :

.

Cliquer sur un bouton le rend gris, filtrant toutes les tâches du tableau qui ont cette balise.Je peux ensuite cliquer à nouveau sur les boutons pour réactiver cette balise, réaffichant toutes les tâches avec cette balise.

Est-ce que j'explique cela assez clairement ?C'est un système déroutant.

Quoi qu'il en soit, j'ai essayé ce qui suit :

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

Quelqu'un voudrait-il m'indiquer la bonne direction ?:)

PS : J'ai fait fonctionner cela plus tôt cette semaine en appelant un filterByTag(tag) fonction dans mon contrôleur.Cela parcourrait chaque tâche du tableau de tâches et s'il y avait la balise qui correspondait, cela masquerait cette tâche.De la même manière réactivation une balise ferait la même chose, parcourrait tout le monde et opérerait la magie...mais on m'a dit que ma méthode était lente + excessive, car "les filtres angulaires peuvent gérer tout cela pour vous, et ce sera la meilleure pratique".C'est pourquoi je suis ici, j'essaie de comprendre comment laisser Angular faire le travail à ma place :)

Toute aide est appréciée !

Answer 1

Vous pourriez écrire une coutume filtre.Le filtre recevrait la liste des balises actives, tags, et l'éventail de tâches à filtrer, tasks, et produirait un tableau de balises filtrées.Ce sera à peu près la même chose que ce que vous avez déjà fait, mais sans fonction supplémentaire sur l'oscilloscope.

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;

        });
    };
});

Ensuite, vous pouvez l'utiliser comme

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

Regarde ça violon.